Отступы

padding

padding (внутренний отступ) - пространство внутри элемента между его содержимым и рамкой (border).

Например. Изменим файл index.html:

<div class="box-padding">Я внутри с отступом!</div>

Изменим файл styles.css:

.box-padding {
    background: lightblue;
    padding: 20px;
    border: 2px solid blue;
}

Отдельно можно задавать:

• padding-top: 2px; - отступ сверху;
• padding-right 2px; - отступ справа;
• padding-bottom: 2px; - отступ снизу;
• padding-left: 2px; - отступ слева;
• padding: 2px 2px 2px 2px; - отступ сверху, справа, снизу, слева;

margin

margin (внешний отступ) - пространство вне элемента, которое отделяет его от других элементов.

Например. Изменим файл index.html:

<div class="box-margin">Я с внешним отступом!</div>

Изменим файл styles.css:

.box-margin {
    background: lightgreen;
    margin: 20px;
    border: 2px solid green;
}

Отдельно можно задавать:

• margin-top: 2px; - отступ сверху;
• margin-right 2px; - отступ справа;
• margin-bottom: 2px; - отступ снизу;
• margin-left: 2px; - отступ слева;
• margin: 2px 2px 2px 2px; - отступ сверху, справа, снизу, слева;