CSS :: Внутренние отступы
http://belarusweb.net
Основы создания сайтов

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

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

HTML Результат BwCodes
<!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>

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

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

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

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

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

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

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

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

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