CSS свойство padding
Сегодня мы будем изучать одну важнейшую тему в языке CSS, а точнее его свойство padding. При помощи данного свойства мы можем устанавливать поля для элементов. Что же такое поле? Полем является внутреннее расстояние от края элемента до начала его содержимого. Думаю, Вам это сейчас ничего не говорит, и Вы не поняли из того, что я написал ни одного слова. Поэтому я сейчас приведу Вам пример, после разбора которого, Вы все поймете. Для начала необходимо написать данный HTML код:
<html>
<head>
<title>Задание полей</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div>Блок с текстом</div>
</body>
</html>
Стили, которые будут применены для блока div:
div {
background: #ccc;
border: 1px solid #000;
padding: 35px;
width: 200px;
}
Мы создали блок, в котором написали определенный текст. При помощи CSS стилей, устанавливаем серый цвет фона, рамку толщиной в один пиксель черного цвета, поля, равные тридцать пять пикселей, и фиксированную ширину для блока. При выполнении этого кода, на ваших экранах должен получиться вот такой блок:
В нашем случае с правой стороны изображения - результат выполнения кода, а с левой - мы разбираем CSS свойство padding. Обращаем внимание именно на левую картинку. На ней мы отчетливо видим, что текст выделен голубым цветом, вокруг которого присутствует фиолетовый цвет до окончания блока, а после фиолетового цвета присутствует рамка толщиной в один пиксель. Расстояние, которое указано фиолетовым цветом и является полем(padding). Ведь я писал, что поле это внутреннее расстояние от края элемента до начала его содержимого. Вдумайтесь в данное определение, посмотрев на наш пример и Вам станет все предельно ясно. В нашем случае мы задаем поля со всех сторон, т.к., CSS свойство padding дает нам такую возможность. Если мы хотим указать поля с определенной стороны, то можем применить следующие CSS свойства: padding-top, padding-right, padding-bottom, padding-left. Каждое из этих свойств отвечает за свою сторону установки полей. И последнее, что я хочу Вам рассказать про данное свойство, мы можем использовать краткую запись CSS свойства padding. Привожу пример: padding: 10px 20px 0px 5px;. Данная запись означает, что значение поля сверху, будет иметь значение в десять пикселей, значение с правой стороны - двадцать пикселей, нижнее значение будет отсутствовать, и значение слева устанавливается в пять пикселей. Данная запись устанавливает поочередно значения полей, начиная сверху, и далее по часовой стрелке (верх, право, низ, лево). Вот мы и изучили свойство padding и можем завершать очередную статью посвященную языку CSS. До встречи.
