Сайты на WordPress: Margin, Padding и Border

  Комментариев к записи Сайты на WordPress: Margin, Padding и Border нет

Как бы ни рос WYSIWYG уровень совремкнных CMS, «копаться в потрохах»  все равно приходится. Один из важных моментов настройки любого элемента сайта — это окружение контента. За это отвечают такие поля как margin, paddin и border.

Margin, padding и border – это части так называемой блочной модели. Механизм блочной модели следующий: посередине есть зона контента, которую окружает поле padding, окруженное границей border, которая в свою очередь, окружена полями margin. Визуально представление блочной модели выглядит так:

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

Например, замените CSS-код для элемента h2 следующим:

h2 {
        font-size: 1.5em;
        background-color: #ccc;
        margin: 1em;
        padding: 3em;
    }

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

Вы также можете задавать margin и padding для всех четырех сторон элемента по отдельности: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom и padding-left.

Не обязательно использовать все эти элементы, но блочная модель может использоваться с любым элементом на странице, и это мощный инструмент.

Комментарии

blogsiam