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

Определение внутренних отступов (полей) элементов

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Определение внутренних отступов элементов</title>
	<style>
		.pad_1{
		padding: 10px;
		border: solid 1px red;
		}
		.pad_2{
		padding: 30px;
		padding-left: 50px;
		border: solid 1px blue;
		}
		
		.b_s{
		border: solid 2px violet;
		width: 400px;
		height: 100px;
		margin-top: 30px;
		margin-left: 10px;
		}
	</style>
</head>
<body>
	<p  class="b_s"><br>
		
		<span class="pad_1">padding: 10px</span>
		<span class="pad_2">padding: 30px</span>
	</p> 
</body>
</html>

Пример 3.11. Определение внутренних отступов (полей) элементов

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

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

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

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

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

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

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