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

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

Давайте разберемся в этих понятиях..

Поле (margin) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.

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

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border) про него тоже не следует забывать.

Расстояния margin и padding указываются:

· px - В пикселях или любых других допустимых CSS единицах измерения.

· % - В процентах.

· auto - Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков < div> и свойств CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Поля и отступы< /title>
< style type=" text/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
}
< /style>
< /head>
< body>
< div class=" block1" >
< div class=" block2" >
< samp> Осмысливая мысли в смысле смысла, есть смысл помыслить о немыслимом! < /samp>
< /div>
< /div>
< /body>
< /html>

Попробуйте поменять значения свойств margin и padding и Вы поймете, что к чему.. а если и так понятно идем дальше..