Работа с отступами padding в CSS

Мы с вами разобрали свойство margin, которое делает отступ наружу от границы. Существует также очень похожее свойство padding, которое делает отступ вовнутрь от границы.

Давайте теперь посмотрим на примерах, как работает это свойство. Для начала приведу блок без отступов (у него текст прилип к границам):

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

#elem {
	width: 300px;
	border: 1px solid red;
	text-align: justify;
}

Результат выполнения кода:

А теперь зададим padding в 30px для всех сторон:

<div id="elem">
	some text...
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid red;
	text-align: justify;
}

Результат выполнения кода: