Поля и отступы

В этой главе мы поговорим о полях (свойство margin) и отступах (свойство padding) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

margin и margin

Поле (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

Дочерние свойства margin и padding.
Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.
У margin зто:
margin-top - Поле от верхней границы элемента родителя,
margin-left - Поле от левой границы элемента родителя,
margin-right - Поле от правой границы элемента родителя,
margin-bottom - Поле от нижней границы элемента родителя.

И у padding соответственно:
padding-top - Отступ от верхней границы элемента до его содержания,
padding-left - Отступ от левой границы элемента до его содержания,
padding-right - Отступ от правой границы элемента до его содержания,
padding-bottom - Отступ от нижней границы элемента до его содержания.

 

Задание

Сделайте оформление текста  как показано на рисунке

Задание

В предыдущем уроке рассматривали span и div

В следующем уроке рассмотрим рамки

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях:      

Мы в соцсетях

Смотрите нас в соцсетях, там мы буликуем готовые работы.