Выравнивание полей CSS. Конфликты полей (margin) в CSS

Урок 9. Отступы (поля) вокруг объектов в CSS.

Дата: 2009-04-22

Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно - это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. - это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом - будет абзац с текстом заключенным в теги .

Создаем новый класс например .pol , и в фигурных {} скобках начинаем писать код стиля. Первое свойство:

margin: 60px; - задает отступ со всех сторон вокруг абзаца (контейнера) в 60 px , естественно 60 px - взято для примера эта цифра может быть любая которая Вам больше подходит в каждом конкретном случае. Есть и варианты, а именно:

margin-left: - отступ слева;

margin-top: - отступ сверху;

margin-right: - отступ справа;

margin-bottom: - отступ снизу.

Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom: ) или только сверху (margin-top: ) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так:

Листинг 9.1.

Что мы записали? Эта запись означает - мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон.

Так же как и преведущее свойство margih , свойство padding: имеет варианты:

padding-left: - отступ слева;

padding-top: - отступ сверху;

padding-right: - отступ справа;

padding-bottom: - отступ снизу.

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

Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код:

Листинг 9.3.

Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода.

Б локи в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML - документа представляют собой самостоятельные блоки, которые содержат любого рода информацию, будь-то текст или изображение (контент). К примеру: для элемента содержимым блока является текст , а для элемента - текст .

Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding) , что кстати придает содержимому блока более привлекательный вид. Сразу за полями пролегает граница блока (border) , которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы (margin) т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.

Поля. Свойства MARGIN-TOP, MARGIN-RIGHT,
MARGIN-BOTTOM, MARGIN-LEFT

Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:

• margin-top - обозначает ширину верхнего поля;
• margin-right - обозначает ширину правого поля;
• margin-bottom - обозначает ширину нижнего поля;
• margin-left - обозначает ширину левого поля.

Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:

p {
margin-top : 0px ;
margin-right : 25px ;
margin-bottom : 0px ;
margin-left : 25px ;
}

Свойство MARGIN

Это свойство - стенографическое, которое применяется для сокращенной записи выше перечисленных свойств. Свойство margin может иметь количество значений от одного до четырех:

• если задано только одно, то поля со всех сторон блока одинаковые;
• если заданы два значения, то первое обозначает поля сверху и снизу, второе - справа и слева (значения каждой пары равны);
• если задано три значения, то первое обозначает верхнее поле, второе - левое и правое, третье - нижнее;
• если заданы все четыре значения, то соответственно, первое - верх, затем - правое поле, потом нижнее и последнее - левое.

p {margin : 15px 5px 20px }

В этом примере верхнее поле абзаца будет равно 15px, правое и левое поля по 5px, нижнее поле будет 20px.

Границы. Свойства BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH

При помощи CSS можно заключить текст абзаца в рамку, как например это сделано на страницах сайта в виде примеров. Данные свойства задают только толщину границ блока для верхнего, правого, нижнего и левого сегментов. Значения можно задвать ключевыми словами:

• thin - тонкая;
• medium - средней толщины (используется по умолчанию);
• thick - толстая.

Так же значения можно задавать в любых единицах длины, в процентах значения не задаются. Правило можно записать так:

p {
border-top-wdth : 1px ;
border-right-wdth : 2px ;
border-bottom-wdth : medium ;
border-left-wdth : thin ;
}

Свойство BORDER-WIDTH

Это стенографическое свойство, значения задаются так же как у свойства . Правило записанное ниже будет соответствовать записанному выше примеру:

p {border-width : 1px 2px medium thin }

Свойство BORDER-COLOR

Это свойство так же стенографическое, с его помощью задается границ блока, значениями являются:

• ключевое слово (red, yellow, black, blue и т.д.);
• шестнадцатиричный код цвета (00FFFF, 000000, FFFFFF и т.д.);
• десятичный код в RGB (color: rgb (120, 25, 182));
• transparent - прозрачная граница.

Если необходимо задать разные цвета каждой из четырех границ, то применяются свойства:

• border-top-color - цвет верхней границы;
• border-right-color - цвет правой границы;
• border-bottom-color - цвет нижней границы;
• border-left-color - цвет левой границы.

Правило для такого примера будет выглядеть так:

p {
border-top-color : blue ;
border-right-color : 000000 ;
border-bottom-color : FF0000 ;
border-left-color : rgb (25, 125, 205) ;
}

Свойство BORDER-STYLE

Свойство стенографическое, оно задает тип линий, которыми являются границы блока. Для задания различных типов линий, для границ блока, используются индивидуальные свойства:

• border-top-style - тип линии верхней границы;
• border-right-style - тип линии правой границы;
• border-bottom-style - тип линии нижней границы;
• border-left-style - тип линии левой границы.

Значениями свойства являются ключевые слова:

• none - граница отсутствует (используется по умолчанию);
• dotted - граница оформлена линией состоящих из точек;
• dashed - пунктирная линия;
• solid - сплошная линия;
• double - двойная сплошная линия;
• groove - граница отображается "вдавленной" линией (имитирует объём);
• ridge - граница отображается "выпуклой" линией;
• inset - граница отображается так, что весь блок выглядит вдавленным;
• outset - весь блок выглядит выпуклым.

Посмотрим на примерах:

Стенографическое свойство border-style позволяет сокращать значения стилей для всех четырех сегментов границы, задается так же как для свойства . Пишем правило для блока с границами выполненными пунктирной линией:

p {border-style : dashed }

Свойства BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT

Это стенографические свойства, которые позволяют сокращенно записать значения свойств border-width , border-style и border-color , смотрим на примере:

p {
border-top : 1px solid red ;
border-right : 3px solid red ;
border-bottom : 1px solid red ;
border-left : 3px solid red
}

Границы у абзаца будут красными, выполненными сплошной линией. Вверху и внизу толщина границ 1px, справа и слева - 3px.

Свойство BORDER

Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля. Пишем пример правила:

p {border : 1px solid blue }

Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.

Отступы. Свойства PADDING-TOP, PADDING-RIGHT,
PADDING-BOTTOM, PADDING-LEFT

Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины или в процентах:

• padding-top - ширина верхнего поля;
• padding-right - ширина правого поля;
• padding-bottom - ширина нижнего поля;
• padding-left - ширина левого поля.

Свойство PADDING

Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем такое правило:

p {
background-color : white ;
border : 2px dotted blue ;
padding : 10px 25px
}

На примере получившегося абзаца посмотрим как работают отступы:

Именно от того, насколько оптимизирован сайт, зависит позиция, на которой поисковые системы будут выдавать его в результатах поиска. Чем выше эта позиция, тем больше посетителей вы получите с поисковиков. Важным этапом оптимизации является наполнение сайта качественным, уникальным контентом. Не нужно копировать с других ресурсов интересные статьи по своей тематике, повторять то, что уже есть на просторах всемирной паутины.

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

CSS предлагает веб-разработчику колоссальные возможности для оформления HTML-страниц. Новичку они покажутся сложными, но если тщательно и методично в них разбираться, технология таблиц стилей покорится, и вёрстка сайтов перестанет доставлять трудности. Одно из незаменимых свойств CSS - padding . Используется оно, чтобы задать поля блоков HTML-страниц.

Что такое блоки?

Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.

Чаще всего блоки задаются тегами

,

-

,

. К каждому такому элементу применяют свойства CSS: padding , margin , border , width и другие. Ширина прямоугольника-блока задаётся свойством width , затем каждый элемент оформляется полями, которые очерчиваются с помощью атрибута border. Наконец, компонент страницы может иметь внешние поля, или отступы - margin , отделяющие его от другого блока.

Синтаксис свойства padding в CSS

Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.

Пример использования	Пояснение
padding: 15 px;	Если после атрибута следует одно число, это означает, что элемент будет иметь одинаковые поля со всех сторон. Запись px предполагает, что значение задаётся в пикселях. То есть в итоге блок будет иметь поля по 15 пикселей.
padding: 18 px 36 px;	Первое из двух чисел указывает, что вертикальные поля составят по 18 пикселей, боковые - в два раза больше - 36 пикселей.
padding: 6 px 12 px 18 px;	Среднее число - значение полей по бокам (левого и правого), два других - вертикальные поля. При этом первое число (6 px) относится к верхнему полю, а последнее (18 px) - к нижнему.
padding: 6 px 12 px 18 px 36 px;	Форма записи свойства CSS padding , в которой присутствуют четыре числа, позволяет задать поля со всех сторон блока. Числовые значения последовательно применяются к верхнему полю и далее по часовой стрелке - к правому, нижнему и левому.
padding-left: 14 px;	Приписка left говорит сама за себя - поле будет установлено только слева элемента.
padding-right: 14 px;	Аналогично предыдущему варианту записи - поле создастся только справа блока.
padding-top: 14 px;	Запись определяет поле сверху.
padding-bottom: 14 px;	Запись определяет поле снизу.

Следует заметить, что по умолчанию в CSS padding равен нулю. Данный атрибут не является наследуемым, то есть его необходимо устанавливать для каждого блока. Помимо привычных и понятных пикселей, ширина пустого пространства вокруг блоков задаётся и в относительных единицах. Например, в примерах выше можно записать 5% - в результате ширина поля просчитается браузером автоматически.

Как использовать свойство?

Итак, формы записи атрибута рассмотрены, но как его использовать на HTML-странице? Первый вариант - более «красивый», когда всё, что касается технологии CSS, не прописывается в HTML, а вынесено в отдельный файл с соответствующим расширением.

Второй вариант - запись непосредственно в тег <style >. CSS padding в этом случае задаётся следующим образом:

< div style=" padding: 22 px">

Как записать атрибут - выбирает верстальщик. В любом случае необходимо владеть всеми способами применения свойства для определения полей, чтобы при случае воспользоваться им.

Поля и отступы являются очень важными стилями при построении HTML-страницы. Они позволяют более точно спозиционировать элементы, создать каркас с необходимыми зазорами и т.п. Оба стиля очень похожи и выполняют схожие функции. Но отличия все же есть.

Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

Имеем две таблицы, лимонного и голубого цвета, расположенные друг под другом. Таблицы состоят из одной ячейки. В ячейке первой таблицы находится красный блок. На этом примере рассмотрим принцип работы полей и отступов.

Поля задаются стилем padding . Этот стиль применим только к элементам-контейнерам, которые могут содержать в себе другие элементы. Стиль позволяет задать значение полей между краями элемента и его содержимым. Стиль margin позволяет задать отступы от элемента до ближайших границ другого элемента. Границами другого элемента могут быть границы родительского контейнера, а также края самой страницы.

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

padding : 3px ; margin : 3px ;

В этом случае поля и отступы будут со всех четырех сторон одинаковы. При задании двух аргументов через пробел:

padding : 3px 5px ; margin : 3px 5px ;

первый будет определять величину полей/отступов сверху и снизу, второй - слева и справа. При задании трех аргументов:

padding : 3px 5px 2px ; margin : 3px 5px 2px ;

первый - поле/отступ сверху, второй - одновременно слева и справа, третий - снизу. При четырех аргументах:

padding : 3px 5px 2px 6px ; margin : 3px 5px 2px 6px ;

первый - поле/отступ сверху, второй - справа, третий - снизу, четвертый - слева. Легко запомнить: первый - сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top , padding-right , padding-bottom , padding-left , margin-top , margin-right , margin-bottom , margin-left . Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

На рисунке красный блок находится внутри ячейки таблицы и примыкает к ее границам, то есть поля у ячейки отсутствуют. Зададим поля ячейке с помощью стиля:

padding : 5px ;

В результате страница изменит вид к следующему:

Рассмотрим теперь отступы. Две таблицы примыкают друг к другу, если мы хотим их немного раздвинуть, можно применить отступы. Тут есть два варианта: либо задать нижний отступ первой таблицы, либо верхний отступ второй таблицы. Давайте воспользуемся вторым:

margin-top : 5px ;

Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:

Кстати, в первом случае (зазор между красным блоком и границами родительской ячейки) того же самого эффекта можно было добиться с помощью задания отступов блока. В общем, если что-то непонятно, отписываемся в комментариях.

HTML-код подопытной страницы:

<html > <head > <title > Тест</ title > <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > <body > <style > table {width: 200px; height: 150px; border: 1px solid #555; border-collapse: collapse} td {vertical-align: top; padding: 0px} div {width: 100px; height: 100px; background: red} </ style > <table style = "background: lime" > <tr > <td style = "padding: 5px" > <div style = "margin: 0px" > </ div > </ td > </ tr > </ table > <table style = "background: skyblue; margin-top: 5px" > <tr > <td > </ td > </ tr > </ table > </ body > </ html > 5 апреля 2016 в 18:32

Расстановка полей и отступов в CSS

• Блог компании Netcracker ,
• CSS ,
• HTML

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

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .

В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.

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

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

Новости

Другие новости

Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.

News { padding: 20px 25px; }

Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте . А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.

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

Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным . Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }

Мы могли бы достигнуть такого же внешнего результата, добавив отступы сверху и снизу для списка новостей.

News__list { margin: 10px 0 12px 0; }

Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .

News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное - определить, какие элементы блока являются основными (обязательными ), а какие опциональными .

Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup , внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.

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

Popup__header + .popup__text { margin-top: 15px; }

Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }

Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.

1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
3. Для списка однотипных элементов - не забывать о том, что число элементов может варьироваться.
4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.