belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
CSS >>>

3.3. Определение внешних отступов элементов

Под внешним отступом элемента подразумевается расстояние от границы текущего элемента до соответствующей границы родительского элемента либо до соответствующей границы соседнего элемента (см. рис. 3.1). Для установки внешних отступов используются ненаследуемые свойства margin, margin-top, margin-right, margin-left, margin-bottom (см. пример 3.10). В качестве значений принимаются величины отступов в любых допустимых в CSS единицах измерения, включая отрицательные значения, а также процентах, которые рассчитываются относительно ширины области содержимого родительского элемента (не ширины самого элемента). Имеется возможность указать в качестве значения параметр auto, который указывает браузеру на автоматическое определение отступов.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Определение внешних отступов элементов</title>
	<style>
		.marg_1{
		margin: 10px;
		border: solid 1px red;
		}
		.marg_2{
		margin: 30px;
		border: solid 1px blue;
		}
		
		.b_s{
		border: solid 2px violet;
		width: 400px;
		height: 100px;
		margin-top: 50px;
		margin-left: 30px;
		}
	</style>
</head>
<body>
	<p  class="b_s"><br>
		<!-- У строчных элементов вертикальные отступы не работают. -->
		<!-- У соседних элементов соответствующие отступы  -->
		<!-- объединяются, при чем используется большее значение -->
		<span class="marg_1">margin: 10px</span>
		<span class="marg_2">margin: 30px</span>
	</p> 
</body>
</html>

Пример 3.10. Определение внешних отступов элементов

Опять же, универсальное свойство margin может принимать через пробел два, три или даже четыре значения, которые задают внешние отступы по описанному выше алгоритму (смотреть).

Внешние отступы нельзя устанавливать элементам, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.

Следует отметить, что вертикальные отступы не срабатывают в отношении строчных элементов, хотя горизонтальные работают правильно. Кроме того, у элемента 'body' по умолчанию присутствуют внешние отступы, которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.

/* Обнуляем отступы */
*{
margin: 0;		/* Обнуляем внешние отступы */
padding: 0;		/* Обнуляем внутренние отступы */
outline: 0;		/* Обнуляем толщину внешней границы */
line-height: 1;	/* Задаем высоту строки */
}

/* Остальные стили */

Пример 3.10.1. Обнуление внешних отступов элементов

На практике, в процессе верстки страниц желательно использовать распространенный прием обнуления всех отступов, показанный в примере 3.10.1. Дело в том, что разные браузеры могут по-разному задавать внутренние и внешние отступы элементов, что может приводить к нежелательным эффектам для веб-мастера. Поэтому лучше обнулить все отступы и задавать их самостоятельно в зависимости от конкретной ситуации.

Контрольные вопросы и задания

  1. Перечислите свойства, при помощи которых задаются внешние отступы элементов. Разрешается ли использовать отрицательные значения этих свойств? Относительно чего рассчитывается величина внешних отступов, задаваемая в процентах?

Словарь новых английских слов

width [wɪtθ] – ширина.
hidden [ˈhɪdn] – скрытый, спрятанный.
dotted [ˈdɒtɪd] – линия в виде точек.
dashed [daʃt] – штриховая линия.
solid [ˈsɒlɪd] – цельный, сплошной.
double [ˈdʌb(ə)l] – парный, двойной.
groove [ɡruːv] – желобок, канавка, паз.
ridge [rɪdʒ] – ребро, край, гребень.
inset [ˈɪnsɛt] – вставлять, вкладка.
shadow ['∫ædəʊ] – тень.
outset [ˈaʊtsɛt] – начало, отправление.
thin [θɪn] – тонкий, худой.
thick [θɪk] – толстый, густой.
outline [ˈaʊtlʌɪn] – контур, обвод, очертание.
transparent [tranˈspar(ə)nt] – прозрачный.
margin [ˈmɑːdʒɪn] – поле (страницы).
display [dɪˈspleɪ] – показ, отображение.
padding [ˈpadɪŋ] – внутренние поля (элемент).
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх