html.okpython.net
HTML и CSS для начинающих

CSS :: Отступы элементов

Внешние отступы элементов

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<meta name="robots" content="noindex">
	<title>Определение внешних отступов элементов</title>

	<style>

		p{
		width: 500px;
		padding: 1em;
		border: solid 2px green;
		background-color: violet;
		}

		/* Внешние отступы в одном объявлении */
		.all_in_one{
		margin: 50px 0px 50px 100px;
		}		

		/* Внешние отступы по отдельности */
		.separate{
		margin-top: 50px;
		margin-right: 0px;        
		margin-bottom: 50px;		
		margin-left: 100px;
		}
	 
	</style>
	
</head>
<body>
	<p  class="all_in_one">
		Внешние отступы в одном объявлении<br>
		margin: 50px 0px 50px 100px;
	</p>

	<p  class="separate">
		Тоже самое, но по отдельности<br>
		margin-top: 50px;<br>
		margin-right: 0px;<br>        
		margin-bottom: 50px;<br>		
		margin-left: 100px;
	</p>	
</body>
</html>

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

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

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

Следует отметить, что вертикальные отступы не срабатывают в отношении строчных элементов, хотя горизонтальные работают правильно. Кроме того, соответствующие внешние горизонтальные отступы между соседними вертикальными сторонами непозиционированных как строчных, так и блочных элементов, суммируются. В тоже время соответствующие внешние вертикальные отступы между соседними горизонтальными сторонами расположенных друг под другом непозиционированных блочных элементов подчиняются эффекту схлопывания, в результате которого, между элементами будет установлен наибольший из них.

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

CSS htmlCodes 
/* Обнуляем отступы */
*{
margin: 0;		  /* Обнуляем внешние отступы */
padding: 0;		  /* Обнуляем внутренние отступы */
outline: 0;		  /* Обнуляем толщину внешней границы */
}

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

Пример №2. Обнуление отступов элементов

Внутренние отступы элементов

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Определение внутренних отступов элементов</title>

	<style>

		p{
		width: 500px;
		margin: 3em;
		border: solid 2px green;
		background-color: violet;
		}

		/* Внутренние отступы в одном объявлении */
		.all_in_one{
		padding: 20px 10px 20px 10px;
		}		

		/* Внутренние отступы по отдельности */
		.separate{
		padding-top: 20px;
		padding-right: 10px;        
		padding-bottom: 20px;		
		padding-left: 10px;
		}
	 
	</style>
	
</head>
<body>
	<p  class="all_in_one">
		Внутренние отступы в одном объявлении<br>
		padding: 20px 10px 20px 10px;        
	</p>

	<p  class="separate">
		Тоже самое, но по отдельности<br>
		padding-top: 20px;<br>
		padding-right: 10px;<br>        
		padding-bottom: 20px;<br>		
		padding-left: 10px;        
	</p>	
</body>
</html>

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

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

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

Также хотелось бы отметить, что внутренние отступы влияют на размеры самого элемента, являясь частью его конструкции, в отличие от внешних отступов, которые элементу не принадлежат и на его размеры не влияют.

Быстрый переход к другим страницам

▲
▼