В этой главе мы поговорим о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.
Поле (margin) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.
Отступом (padding) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..
На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) про него тоже не следует забывать.
Расстояния margin и padding указываются:
- px - В пикселях или любых других допустимых CSS единицах измерения.
- % - В процентах.
- auto - Размер полей и отступов автоматически рассчитывается браузером.
Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков <div> и свойств CSS.
Пример CSS:
div.block1 {width: 260px;background-color: #c5ffa0;border: 2px solid #a68754}
div.block2 {background-color: #c0e4ff;border: 8px solid #a68754; margin: 40px; padding: 20px}
Пример HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="block1">Поле margin
<div class="block2">Поле padding
</div>
</div>
</body>
</html>
Попробуйте поменять значения свойств margin и padding.
Возможные значения margin и padding.
В примере выше присудив свойствам margin и padding по одному значению, мы определили поля и отступы элемента со всех четырех его сторон. Для того чтобы указать разные размеры полей и отступов для каждой из сторон элемента, необходимо указывать два, три или четыре аргумента через пробел. Причем в зависимости от количества значений результат будет разным.
margin: 5px; - одно значение.
Одно значение - Поля одинаковые со всех сторон.
margin: 5px 40px; - два значения.
Первое значение - Устанавливает поля от верхней и нижней границ.
Второе значение - Устанавливает поля от левой и правой границ элемента.
margin: 5px 40px 20px; - три значения.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поля от левой и правой границ элемента.
Третье значение - Устанавливает поле от нижней границы элемента.
margin: 5px 40px 20px 1px; - четыре значения.
Первое значение - Устанавливает поле от верхней границы элемента.
Второе значение - Устанавливает поле от правой границы элемента.
Третье значение - Устанавливает поле от нижней границы элемента.
Четвёртое значение - Устанавливает поле от левой границы элемента.
С padding дело происходит по тому же принципу, как и с margin, отступы от внутренних границ элемента до содержания приобретают размеры в зависимости от количества аргументов и их значений.
Пример CSS:
div.block1 {width: 260px; background-color: #c5ffa0; border: 2px solid #a68754 }
div.block2 {background-color: #c0e4ff; border: 2px solid #a68754; margin: 20px 5px 20px 40px; padding: 5px 25px }
Пример HTML:
<head>
<title>My CSS</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="block1">Текст 1 Текст 1 Текст 1
<div class="block2">Текст 2 Текст 2 Текст 2
</div>
<div class="block2">Текст 3 Текст 3 Текст 3
</div>
</div>
</body>
</html>
Дочерние свойства margin и padding.
Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.
У margin зто:
margin-top - Поле от верхней границы элемента родителя,
margin-left - Поле от левой границы элемента родителя,
margin-right - Поле от правой границы элемента родителя,
margin-bottom - Поле от нижней границы элемента родителя.
И у padding соответственно:
padding-top - Отступ от верхней границы элемента до его содержания,
padding-left - Отступ от левой границы элемента до его содержания,
padding-right - Отступ от правой границы элемента до его содержания,
padding-bottom - Отступ от нижней границы элемента до его содержания.
Задание
Сделайте оформление текста как показано на рисунке