Содержание

Отступы css. Расстановка полей и отступов в CSS Отступы в css margin

Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

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

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством

margin . Такой отступ находится вне элемента.

Для наглядности картинка:

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

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

p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

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

  • если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
  • если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
  • если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
  • если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

p {
margin-left: 20px;
}
h2{
margin-right:15%;
}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

p{
margin-left:-20px;
}

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin . Он задает величины отступа одновременно со всех сторон элемента web-страницы:

margin: [ [ []]]

Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

  • border-width — толщина рамки;
  • border-color — цвет рамки;
  • border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки :

border-color: [цвет | transparent] {1,4} | inherit

Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки :

border-style: {1,4} | inherit

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

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

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border . Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

  • для задания внутренних отступов пользуемся свойством padding ;
  • для настройки внешних отступов существует правило margin ;
  • параметры рамок задаются с помощью атрибута border .

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

На этом все, до новых встреч!

Здравствуйте! Изначально хотел разделить эту статью на 4 маленьких, но потом задумался. Зачем? Ведь удобнее, когда такая информация собрана в рамках одного материала.

Поэтому сегодня мы узнаем, как сделать CSS отступ слева и со всех остальных сторон – справа, сверху и снизу. Их можно делать для картинок и текстов. Они бывают двух видов:

  • Внешние;
  • Внутренние.

Для первых используется ключевое свойства margin, для вторых – padding. Для наглядности сделал для вас небольшой пример. Чтобы визуально было удобно различать внутреннее и внешнее пространство добавил видимую таблицу. Взглянем, что получилось?

Внешние отступы

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

В целом можно применять нижеперечисленные варианты для задания отступов.

Слева (margin-left).

Справа (margin-right).

Сверху (margin-top).

Снизу (margin-bottom).

Сейчас покажу еще классный нюанс.

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

Внутренние отступы

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

Смотрим, что из этого вышло.

По аналогии с внутренними отступами в CSS внешние можно прописывать сокращенным кодом или для сторон по отдельности.

Это были основные моменты. Напоследок покажу, как еще можно облегчить некоторую работу.

Отступы на уровне выбранных тегов

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

Взглянем, что произошло после сохранения изменений.

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

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

Дополнительно работает подписка на бесплатную рассылку информации по электронным адресам. Для подписки на блоге есть специальная форма. До связи.

Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.

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

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

Hello, world!

Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):

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

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

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

Внутренний отступ с помощью CSS-свойства «padding»

Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:

Hello, world!

Hello, world!

со своими стилями:

Test_div { width: 250px; border: 1px solid; }

Визуальный вариант получается таким:


Что из себя представляет свойство «padding »? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:

Test_div { width: 250px; border: 1px solid; padding: 10px; // Внутренний отступ 10px }

Визуально это получается так:


Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

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

Первый – это с явным указанием сторон:

Padding-top: 10px; // Внутренний отступ 10px сверху padding-right: 10px; // Внутренний отступ 10px справа padding-bottom: 10px; // Внутренний отступ 10px снизу padding-left: 10px; // Внутренний отступ 10px слева

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

Padding: 10px 0 0 0; // Внутренний отступ 10px сверху, все остальное — 0px padding: 10px 0; // Внутренний отступ 10px сверху и снизу, а по бокам — 0px padding: 0 10px; // Внутренний отступ 0px сверху и сниз, а по бокам — 10px

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так : первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Если значения два (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.

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

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin » – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

Margin-top: 10px; // Внешний отступ 10px сверху margin-right: 10px; // Внешний отступ 10px справа margin-bottom: 10px; // Внешний отступ 10px снизу margin-left: 10px; // Внешний отступ 10px слева

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

Margin: 10px 0 0 0; // Внешний отступ 10px сверху, все остальное — 0px margin: 10px 0; // Внешний отступ 10px сверху и снизу, а по бокам — 0px margin: 0 10px; // Внешний отступ 0px сверху и сниз, а по бокам — 10px

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding », о нем написано выше.

Используем margin со следующим значением:

Test_div { width: 250px; border: 1px solid; margin: 10px; // Внешний отступ 10px }

Визуально это будет выглядеть так:


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

Важная особенность : если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

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

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

Описание

CSS свойство margin-top устанавливает внешний отступ сверху элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента либо до границы элемента, расположенного над ним. Обратите внимание, для строчных элементов (display : inline;) могут быть установлены только внешние отступы с левой и с правой стороны.

Размер внешнего верхнего отступа можно указывать в пикселях (px), процентах (%) или в других единицах измерения CSS . Значение может быть как положительным, так и отрицательным.

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

Объединение полей

  1. Поля сестринских элементов, расположенных один под другим и находящихся в потоке документа, объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px , а нижнего элемента (margin-top) — 20px , единое поле в этом случае будет высотой 20px .
  2. Объединение полей родительского и дочернего элемента, находящихся в потоке документа, происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto . Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

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

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

Основные правила позиционирования

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

Особое значение имеет отступ сверху. CSS внутри блока связывает правила внутренних отступов с правилами абсолютно и относительно позиционированных элементов внутри этого блока.

Обычная практика CSS-правил: можно указать отступы со всех сторон одинаково, попарно сверху/снизу и справа/слева либо для каждой стороны отдельно. Например,

  • margin: 10px;
  • padding: 10px20px;
  • padding: 10px20px30px40px.

В первом случае устанавливается отступ элемента от сторон внешнего контейнера, в котором он находится. Во втором случае отступы сверху и снизу равны 10px, слева и справа — 20px. В третьем случае указаны размеры отступов по всем сторонам: сверху, справа, снизу и слева.

Во всех указанных случаях отступ сверху CSS равен 10 px.

Правила, изменяющие положение элементов

Если элемент верстки не позиционирован абсолютно, он располагается в общем порядке формирования страницы.

Если определить отступ сверху CSS в элементе scCurrInfo, цель будет достигнута, а если на уровне li — нет.

В данном примере использование правила padding: 40px; требует адекватного уменьшения правил width и height на 80px. В противном случае размер блока scCurrInfo вылезет за границы внешнего блока.

Если убрать правило padding из описания scCurrInfo, но добавить его со значением 20px в описание стиля элемента списка, получим только отступ сверху. CSS не применит это значение к другим сторонам.

Естественно, такое использование правила отступа относится к каждому элементу li.

Общая практика форматирования контента

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

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

Между тем у таблиц, кроме очевидных недостатков, есть множество качественных преимуществ. Создавая отступы сверху, CSS учитывает отступы слева, справа (снизу — это особенный момент). Правила ячеек таблицы позволяют управлять выравниванием как по вертикали, так и по горизонтали. Используя стили рядов, комбинируя их со стилями ячеек, можно формировать сложные представления контента.

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

Абсолютное позиционирование

Блок с правилом POSITION: absolute ; будет находится в месте, установленном его координатами относительно блока, в котором он находится.

Характерная черта правил CSS — «практика — лучший критерий истины» в большинстве случаев, особенно когда требуется кроссбраузерность и верстка производится вручную, предпочтительнее изучения полноценных мануалов по каскадным таблицам стилей.

Использование таблиц часто приводит к проблемам смещения содержимого ячеек. Аналогичное смещение внутри блока влияет не всегда и не на все элементы. Экспериментируя, можно добиться желаемого результата. Тривиальную задачу: как убрать отступ сверху, CSS не всегда решает тривиальным образом.

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

Рамки и границы. Отступы и рамки CSS

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

Синтаксис свойства border прост: border: 1px solid black; . Это свойство имеет три значения:

  • 1px — толщина границы.
  • solid — тип рамки, solid — это сплошная линия, double — двойная сплошная, dashed — пунктиром. Есть ещё несколько типов рамок, информацию про них найдёте тут: CSS border .
  • black — устанавливает цвет границы. Цвета можно задавать по названию, допустимые значения находятся тут: таблица цветов CSS , или по шестнадцатеричному коду. Как это сделать напсано в статье: цвета в CSS .

Рамка текста CSS

Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:

Этому абзацу присвоен класс example-1.

В этом примере мы также использовали свойство CSS padding , или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).

Этому абзацу присвоен класс example-2.

Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.

Как сделать рамку картинки в CSS

Рамки для картинок задаются аналогично при помощи свойства border . Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.

Example-img { border: 4px solid green; }

Вот как сработает этот код:

Как закруглить углы рамки в CSS

Округление углов рамки в CSS делается при помощи свойства border-radius . Это свойство появилось в CSS3, и работает во всех современных браузерах.

Свойство border-radius может иметь от одного до четырёх значений. Если значение одно, то оно устанавливает степень закругления для всех углов. Давайте приведём пример, как будет работать это свойство с одним значением.

Example-3 { border: 1px solid black; border-radius: 15px; padding: 10px; }

Вот как он работает:

Свойство border-radius: 15px.>

Если у блока нет рамки, то есть граница border-width: 0; , то закруглена будет область залитая фоновым цветом (свойство background-color). Вот пример:

Example-4 { border-width: 0; // хотя это значение равно 0 по умолчанию background-color: #DDD; border-radius: 15px; padding: 10px; }

Вот как работает этот пример:

Свойство border-radius: 15px.>

Как я писал ранее, для свойства border-radius можно устанавливать от одного до четырёх значений. В таблице ниже описано как будут работать все комбинации значений.

Для свойсва border-radius значения можно указывать в процентах.

Давайте нарисуем круг на CSS. Для этого возьмём кватратный блок 100 на 100 пикселей и округлим углы CSS правилом border-radius: 50% .

Example-5 { width: 100px; height: 100px; background-color: #F00; border-radius: 50%; }

Вот как работает этот пример:

На этом тема «рамки в CSS» раскрыта полностью. Успехов в изучении CSS!

В этой главе:

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

  • Margin (внешний отступ) — пустое пространство (поле), которое отделяет один элемент от другого. Самый простой пример внешнего отступа — промежуток между абзацами, идущими друг за другом. Область внешнего отступа прозрачна и не может иметь свой цвет и других эффектов оформления.
  • Border (рамка элемента) — граница с любой стороны элемента. Рамка может быть установлена как со всех сторон элемента, так и с одной стороны. Используя рамку можно просто красиво оформить элемент или визуально отделить содержимое текущего элемента от других элементов страницы.
  • Padding (внутренний отступ) — пустое пространство между содержимым элемента и его рамкой. Область внутреннего отступа прозрачна и не может иметь свой цвет или другие эффекты оформления.
  • У большинства элементов есть область содержимого, в которой располагается все содержимое элемента (текст, вставляемые изображения или другие элементы).

Рамка

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


(горизонтальная линия), выступая в качестве разделителя.

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

Вместо указания всех трех свойств, можно указать всего одно — свойство border , которое позволяет одновременно указать ширину, стиль и цвет для рамки:

Название документа

Первый абзац.

Второй абзац.

Третий абзац.

Для управления рамкой отдельно с каждой стороны элемента, используются соответствующие свойства:

  • border-top — верхняя рамка
  • border-left — левая рамка
  • border-right — правая рамка
  • border-bottom — нижняя рамка

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

Внешний и внутренний отступы

Внутренний отступ — пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding .

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

Свойства padding и margin могут принимать от одного до четырех значений:

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

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

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

Название документа

Обычный абзац.

Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top , padding-right , padding-bottom и padding-left . Внешние отступы регулируются свойствами: margin-top , margin-right , margin-bottom и margin-left .

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

Ширина и высота элемента

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

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Границы в CSS

Блок div с рамкой 3px красного цвета.

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

Границы в CSS

Блок div с разными границами.

В этом примере для каждой стороны блока задана своя толщина границы, стиль и цвет.

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы — толщину, стиль и цвет — можно задать отдельно используя специальные свойства.

  • border-style — стиль границы.
  • border-width — ширина границы.
  • border-color — цвет границы.

Рассмотрим каждое из значений по отдельности.

Свойство border-style. Стиль границы.

Свойство border-style устанавливает стиль рамки. В CSS, в отличии HTML, граница элемента может быть не только сплошной. Допустимы следующие значения для стиля границы:

  1. none — граница отсутствует (по умолчанию).
  2. solid — сплошная граница.
  3. double — двойная граница.
  4. dashed — пунктирная граница.
  5. dotted — граница из ряда точек.
  6. ridge — граница «гребень».
  7. groove — граница «бороздка».
  8. inset — вдавленная граница.
  9. outset — выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)

сплошная граница (solid)

двойная граница (double)

граница из ряда точек (dotted)

пунктирная граница (dashed)

граница «бороздка» (groove)

граница «гребень» (ridge)

вдавленная граница (inset)

выдавленная граница (outset)

Кстати, если для рамки ridge задать цвет границы чёрный, то получится вот такой результат.

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

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

Одно значение (solid) — стиль границы установлен для всех сторон блока.

Два значения (solid double) — первое значение установило стиль для верхней и нижней сторон, второе для боковой.

Три значения (solid double dotted) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (solid double dotted dashed) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Свойство border-width. Толщина границы.

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

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.

Код примера:

Толщина границы в CSS

Одно значение (2px) — толщина границы установлен для всех сторон блока.

Два значения (1px 5px) — первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) — первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) — каждое значение для одной стороны по часовой стрелке начиная с верхней.

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

  • thin — тонкая граница;
  • medium — средняя толщина;
  • thick — толстая граница;

Толщина границы: thin.

Толщина границы: medium.

Толщина границы: thick.

Свойство border-color. Цвет границы.

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье «Цвета в CSS «, а именно:

  • Шестнадцатеричная запись (#ff00aa ) цвета.
  • Формат RGB — rgb(255,12,110) . Формат RGBA для CSS3.
  • Форматы HSL и HSLA для CSS3.
  • Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).

Два значения (red black).

Три значения (red black yellow).

Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Толщина границы в CSS

Установка значений для сторон отдельно

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

  • border-top (верхняя граница)
  • border-right (правая граница)
  • border-bottom (нижняя граница)
  • border-left (левая граница)

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

Параметры верхней границы (border-top ).

  • border-top-color — задаёт цвет верхней границы элемента.
  • border-top-width — задаёт толщину верхней границы элемента.
  • border-top-style — задаёт стиль верхней границы элемента.

Параметры правой границы (border-right ).

  • border-right-color — задаёт цвет правой границы элемента.
  • border-right-width — задаёт толщину правой границы элемента.
  • border-right-style — задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom ).

  • border-bottom-color — задаёт цвет нижней границы элемента.
  • border-bottom-width — задаёт толщину нижней границы элемента.
  • border-bottom-style — задаёт стиль нижней границы элемента.

Параметры левой границы (border-left ).

  • border-left-color — задаёт цвет левой границы элемента.
  • border-left-width — задаёт толщину левой границы элемента.
  • border-left-style — задаёт стиль левой границы элемента.

Пример использования этих свойств:

Толщина границы в CSSВ этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
  • переопределён цвет верхней границы при помощи свойства border-top-color в красный,
  • при помощи свойства border-right-width установлена толщина правой границы 10px,
  • при помощи свойства border-bottom-style стиль нижней границы переопределён как double,
  • при помощи свойства border-left-color левой границе установлен синий цвет.

Свойство border-radius. Округление углов границы.

Свойство border-radius предназначено для округления углов границ элемента. Это свойство появилось в CSS3 и корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

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

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как оформлять текст в CSS. В данной статье я бы хотел рассказать, что такое рамки в CSS и как их использовать. Правила, отвечающие за рамку состоят из трех элементов: толщина рамки, стиль и цвет. Давайте создадим файл index.html со следующим содержимым:

На этой же странице зададим стили для блока с id = tester (внутри заголовка страницы добавим следующие строки):

Свойство border-width отвечает за ширину рамки, свойство border-style отвечает за стиль рамки, border-color — за цвет рамки. С первым и третьим свойством всё понятно. Все значения, которые может принимать свойство border-style показаны на рисунке ниже:

Если мы сейчас откроем нашу страницу в браузере, то увидим, что вокруг блока появилась сплошная рамка красного цвета шириной в 1px.

Это я вам показал длинную запись рамки в CSS (данная запись является очень громоздкой и её обычно никто не использует). Все инструкции можно уместить в одной строке. В нашем случае это будет выглядеть вот так:

Border:1px solid red;

Т.е. сначала указываем толщину рамки, затем указываем стиль рамки и цвет.

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

Border-top: 2px solid red; border-bottom: 3px dotted green; border-left: 6px dashed yellow; border-right: 5px double #fe54e5;

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

Рамки применяются абсолютно везде: практически сложно встретить дизайн сайта, на котором не использовались бы рамки. Очень часто пункты меню отделяются вертикальной линией, которая задаётся как раз свойством border-right , либо border-left . Также можно делать интересные эффекты у ссылок. Как раз на эту тему домашнее задание:

Необходимо создать страницу и разместить на ней 2 ссылки. Стиль оформления данных ссылок: сплошная линия, при наведении данная линия должна становиться пунктирной.

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

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его отступы padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль , цвет и ширина .

Оформление рамок и границ HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

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

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
none Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden Эквивалентно none .
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:

{border-style: solid dotted none dotted;}
initial
inherit

Синтаксис

P {border-style: solid;} p {border-top-style: solid;}

2. Цвет рамки border-color

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

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет Цвет рамок задается при помощи значений свойства .
{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:

{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

P {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

Синтаксис

P {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:

Div { width: 100px; height: 100px; border: 2px solid grey; }

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .

Синтаксис

P {border-top: 2px solid grey;}

6. Внешний контур outline

Свойство задаёт внешнюю границу вокруг элементов (т.е. за пределами обычной границы). Основная цель данного свойства — выделить какой-либо элемент. В отличие от свойства border , применение данного свойства не влияет на размер или местоположение элемента, т.к. контур отображается поверх блока элемента, что в свою очередь, может привести к перекрыванию внешних отступов элемента и соседних областей.

Также, внешний контур, в отличие от рамки элемента, окружает элемент со всех сторон, обрамляя его целиком.

Внешний контур всегда имеет прямоугольную форму, он не повторяет границы блока, для которого задан border-radius .

Свойство outline позволяет объединить в себе следующие свойства: outline-color , outline-style , outline-width . Если какое-то из значений не указано, его место займет значение по умолчанию.

Div { width: 100px; height: 100px; outline: #cacd58 solid 2px; }

6.1. Стиль внешнего контура outline-style

Вид линии внешнего контура задаётся аналогично со стилем рамки элемента. Не наследуется.

Синтаксис

P {outline-style: ridge;}

6.2. Цвет внешнего контура outline-color

Цвет внешнего контура можно прописывать только при установленном значении outline-style . Не наследуется.

Синтаксис

P { outline-style: ridge; outline-color: silver; }

6.3. Толщина внешнего контура outline-width

Толщина линии внешнего контура задается аналогично с толщиной рамки элемента. Не наследуется.

Синтаксис

P { outline-style: dotted; outline-width: 5px; }

Размеры отступов html. Отступы

С появлением свойств управления отступами на css у web разработчиков появились огромные возможности по управлению интерфейсом и дизайном страниц сайтов. До этого отступами управляли при помощи таблиц, что являлось значительно более сложным и объемным.

Рассмотрим основные свойства управления отсутпами.

Управление внешними отсупами в HTML на CSS при помощи свойства margin

Свойство css margin позволяет управлять именно внешними отступами . Допустим имеется изображение, для которого нужно указать внешние отсупы: 30 пикселей сверху, 20 слева, 10 справа и 5 снизу.

Для задания отсупа сверху мы пропишем: margin-top: 30px

Для задания отступа слева: margin-left: 30px

Отступ справа: margin-right: 10px

И снизу: margin-bottom: 5px

Можно все объединить, прописав следующее: margin: 30px 10px 5px 20px;

Например зададим эти отступы для изображения. Получаем следующий html код:

На видно как изображение сместилось относительно родительского элемента.

Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.

Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;

Часто для начинающих верстальщиков не всегда получается сразу запомнить все возможные комбинации, поэтому на начальных этапах можно использовать параметры: margin-top, margin-right, margin-left и margin-bottom. Top — вверх, right-право, left-лево, bottom-снизу.

Для более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, — это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding , так и снаружи с помощью margin .

В css прописываются эти свойства для отступов таким образом (для примера взят параграф):

Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.

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

Значения отступов.

  • Первое значение: отступ сверху;
  • Второе значение: отступ справа;
  • Третье значение: отступ снизу;
  • Четвёртое значение: отступ слева.

В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px , слева и справа по 10px (как правило они для симметрии прописываются одинаковые), и снизу указал 30px .

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:

То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin , что в padding .

А если у вас одинаковые величины для внешних отступов сверху и снизу (к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа (к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:

Соответственно для внутреннего отступа css запись делается идентично этой.

Применение одинарных отступов: для каждой стороны отдельно.

Для указания отдельного отступа применяются следующие свойства с одним значением:

Свойства отступа для каждой стороны.

  • margin-top: 3px; внешний верхний отступ;
  • margin-left: 4px; внешний левый отступ;
  • margin-right: 6px; внешний правый отступ;
  • margin-bottom: 10px; внешний нижний отступ.

Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding .

К примеру у вас для всех картинок img уже прописаны в css все отступы.

То есть (для уяснения) внешний отступ имеет такие значения: сверху 10px , слева и справа: по 20px , и снизу 14px .
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.

В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img , и изменит только внешний отступ для верхней стороны (в нашем случае: 40px ).

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

Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

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

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin . Такой отступ находится вне элемента.

Для наглядности картинка:

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

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

p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

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

  • если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
  • если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
  • если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
  • если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

p {
margin-left: 20px;
}
h2{
margin-right:15%;
}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

p{
margin-left:-20px;
}

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin . Он задает величины отступа одновременно со всех сторон элемента web-страницы:

margin: [ [ []]]

Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

  • border-width — толщина рамки;
  • border-color — цвет рамки;
  • border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки :

border-color: [цвет | transparent] {1,4} | inherit

Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки :

border-style: {1,4} | inherit

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

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border . Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

  • для задания внутренних отступов пользуемся свойством padding ;
  • для настройки внешних отступов существует правило margin ;
  • параметры рамок задаются с помощью атрибута border .

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

На этом все, до новых встреч!

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

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

Так как большая часть содержимого веб страницы представлена в виде текста, способность стилизовать этот текст как привлекательный, так и эффективный, это важный навык, который может стать веб дизайнером. Для создание отступа описание и абзаца наиболее часто используемым и рекомендуемым методом будет использование CSS. Здесь будут вам предоставлены различные примеры того, как CSS можно использовать для текста и элемента отступа.

Задать внешний отступ сверху на CSS

Чтоб создать верхние отступы используется, то безусловно без CSS свойств не обойтись, потому нам нужно margin-top, это значение что можно по-разному задавать, как в px и стандартно на пикселях, em, % и так далее, что все происходит в CSS стилистике в единицах измерение.

Пример использования:

Margin-block{
margin-top:50px;
}

Что можно посмотреть на изображение:

Также можно задействовать, чтоб выронить блоки, то здесь можете задействовать свойство под названием margin-left также margin-right и margin-bottom . Где просто указываем свойство margin, где под него есть возможность изначально задать 4 параметра, здесь рассмотрим по часовой стрелке для понятие, где начнем с верхней стороны с продолжением под каждую из сторон.

margin: 20px 50px 30px 50px;


Вот так будет работать margin : сверху справа снизу слева:

Также есть внутренний отступ сверху на CSS

Бывает такое, что нужно выровнять элемент контента по вертикали, это относительно родительского блока, здесь есть возможность задействовать уже другие свойства, как padding-top, что делает, а точнее по умолчанию задает внутренний отступ по вверх. Если говорить про аналогичные свойства, что также можно прописать и задать по аналогу, то здесь идет margin в px, em, % и других единицах.

Пример:

Padding-block{
padding-top: 47px;
}


Смотрим на примере:

Теперь можно рассмотреть аналог свойству margin и padding , который задействован под задание отступов с других сторон элемента блока, но уже идет по отдельности: padding-left , padding-right , padding-bottom . Где сразу можно задать то расстояние, который вам нужно, только уже для всех сторон, и все будет одновременно.

padding: 10px 20px 40px 50px;


Здесь изначально можно задать значение как и для margin начиная как понимаете сверху, а вот далее все идет по часовой стрелке, это справа, снизу, слева, и так далее.

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

Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.

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

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

Hello, world!

Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):

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

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

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

Внутренний отступ с помощью CSS-свойства «padding»

Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:

Hello, world!

Hello, world!

со своими стилями:

Test_div { width: 250px; border: 1px solid; }

Визуальный вариант получается таким:


Что из себя представляет свойство «padding »? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:

Test_div { width: 250px; border: 1px solid; padding: 10px; // Внутренний отступ 10px }

Визуально это получается так:


Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

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

Первый – это с явным указанием сторон:

Padding-top: 10px; // Внутренний отступ 10px сверху padding-right: 10px; // Внутренний отступ 10px справа padding-bottom: 10px; // Внутренний отступ 10px снизу padding-left: 10px; // Внутренний отступ 10px слева

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

Padding: 10px 0 0 0; // Внутренний отступ 10px сверху, все остальное — 0px padding: 10px 0; // Внутренний отступ 10px сверху и снизу, а по бокам — 0px padding: 0 10px; // Внутренний отступ 0px сверху и сниз, а по бокам — 10px

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так : первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Если значения два (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.

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

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin » – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

Margin-top: 10px; // Внешний отступ 10px сверху margin-right: 10px; // Внешний отступ 10px справа margin-bottom: 10px; // Внешний отступ 10px снизу margin-left: 10px; // Внешний отступ 10px слева

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

Margin: 10px 0 0 0; // Внешний отступ 10px сверху, все остальное — 0px margin: 10px 0; // Внешний отступ 10px сверху и снизу, а по бокам — 0px margin: 0 10px; // Внешний отступ 0px сверху и сниз, а по бокам — 10px

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding », о нем написано выше.

Используем margin со следующим значением:

Test_div { width: 250px; border: 1px solid; margin: 10px; // Внешний отступ 10px }

Визуально это будет выглядеть так:


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

Важная особенность : если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

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

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

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

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

Делается это при помощи стилей CSS, т.е. не нужно будет изменять фотографии и снова загружать на хостинг, или что-то рисовать в Photoshop. Все намного проще.

Для начала посмотрим, о чем идет речь. Вот наглядный пример:

Что мы здесь видим:

  • Само изображение (черный текст на сером фоне). Оригинальное изображение, без CSS вокруг, можно посмотреть по этой ссылке https://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg.

  • Желтая рамка вокруг изображения. Она имеет неравномерные отступы сверху, снизу и по краям (аля Polaroid).

  • Тоненькая рамка в 1px темно-серого цвета вокруг желтой рамки.

Если заинтересовались конкурсом, который анонсирован на картинке, сельву пле http://wpnew.ru (срок: с 30 января 2013 по 28 февраля 2013).

СодержаниеПоказать

Как такое сделать

Итак, теперь вы поняли о чем будет вестись дальше речь. Скажу сразу: вы можете выбирать любые цвета для рамок. Я постарался подобрать такие, которые бы отличались и были заметны на любом мониторе. Для этого даже пришлось немного изменить стили сайта Wpnew.ru (как всегда помогает FireBug): сделать фон более серым, текст черным, убрать рекламу. Поэтому не удивляйтесь, кто читает Петра Александрова.

Делаем (условно) желтую рамку

Чтобы не вводить вас в заблуждение, внесу ясность: на самом деле желтый цвет это не «рамка», а лишь задний фон картинки. Чтобы такое сделать, необходимо добавить внутренний отступ изображения. Фактически — мы отодвинули картинку от края конструкции, в которой задний фон желтого цвета.

Вот так выглядит код картинки, когда я только ее загрузил в статью обычным способом на WordPress (встроенным загрузчиком, которым пользуетесь и вы):

А вот так будет выглядеть код картинки, если добавить задний фон желтого цвета с отступом:

И наглядный результат:

Самые внимательные из вас заметили, что добавилось style=»background:#FFE296;padding:15px 8px 25px 8px;», которое и задало необходимые нам параметры:

  • style=» « — конструкция, в которой мы описываем необходимые нам свойства CSS.

  • background:#FFE296; — задаем задний фон. Здесь #FFE296 обозначает желтый оттенок. Вы можете выбрать любой другой (воспользуйтесь пипеткой FastStone Capture или такой же пипеткой в Photoshop).

  • padding:15px 8px 25px 8px; — внутренний отступ, где отступы задаются так padding: сверху справа снизу слева;

Делаем наружную рамку серого цвета

В данном случае это будет действительно рамкой. Задается она так:

border:1px solid #CCCCCC;

Здесь у нас параметр border (рамка): 1px (толщина) solid (непрерывная) #cccccc (цвет).

Теперь осталось совместить рамку и задний фон, чтобы получить эффект, как показано на первой картинке к статье:

Как сделать это у себя на сайте

Есть два способа как такое сделать для фотографий/изображений на ваших сайтах:

  • Вставлять определенный код в каждую фотографию/картинку в статье (режим HTML в админке сайта, во время написания статьи).
  • Прописать этот код один раз в файле стилей шаблона (style.css или аналог) и забыть навсегда о рутине.

Как у первого, так и второго способа есть свои плюсы и минусы. Давайте по-порядку.

Вставляем код вручную в каждую картинку

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

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

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

Автоматическая подстановка стилей для изображения

При данном способе достаточно один раз прописать необходимые стили для изображения, чтобы они автоматически добавлялись в каждой статье. Для этого нам понадобится файл стилей шаблона (style.css, css.css или еще как-то будет называться).

При помощи бесплатного дополнения для браузеров FireBug (посмотрите видео с моего канала YouTube, где наглядно показаны принципы работы) находим класс элемента, отвечающего за отображения контента на странице, а затем прописываем для него указанные выше в статье стили.

К примеру: у меня на сайте за внешний вид тела статьи (фон, рамка, шрифт, цвет шрифта и прочее) отвечает класс post. По этой причине, в файле style.css я у себя сделаю с новой строки вот такую запись:

.post img {background:#fff;padding:15px 8px 25px 8px;}

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

Вы так же внимательно пройдитесь по файлу стилей, прежде чем создавать новое правило. Быть может уже есть .post img (условно говоря) и вам останется лишь подправить в нем параметры.

Плюс данного способа: сделали один раз и забыли.

Минус: часть из вас сейчас сидит и моргает в недоумении глазами — «ничего не понял(а)».

Послесловие

Надеюсь, доступно объяснил принцип оформления изображений. Если что-то не поняли, то еще раз перечитайте статью и только затем пишите в комментарии с вопросами реализации.

Помните: «Кто захочет, тот поймет!». Удачи в блогерстве и конкурсах.

позиционирование контента. Управление внешними отсупами в HTML на CSS при помощи свойства margin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 =

Аня написала следующий код (пример 1) и получила страницу, показанную на рис. 1. Но Ане нужно, чтобы не было отступов между блоками, а также справа и слева от блоков. Какие изменения в код для этого требуется внести?

Когда требуется установить абзацный отступ, лучше всего использовать стилевое свойство text-indent . Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах (пример 1).

Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL , в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin .

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

вокруг нее сверху и снизу автоматически добавляются отступы. Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM .

Как изменить расстояние между абзацами текста?

При использовании тега

Автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin , оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

Здравствуйте, уважаемые читатели блога сайт! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

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

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin . Такой отступ находится вне элемента.

Для наглядности картинка:

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

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

p.test{
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
}

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

padding: [ [ []]]

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

  • если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
  • если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
  • если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
  • если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

p.test{ padding:5px 35px 10px 20px}

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

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

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

p {
margin-left: 20px;
}
h2{
margin-right:15%;
}

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера . Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

p{
margin-left:-20px;
}

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin . Он задает величины отступа одновременно со всех сторон элемента web-страницы:

margin: [ [ []]]

Данное свойство в случае задания одного, двух, трех или четырех значений отступов подчиняется тем же законам, что и правило padding.

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

  • border-width — толщина рамки;
  • border-color — цвет рамки;
  • border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] {1,4} | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

border-width:medium;

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила {border-width: 1px 2px 3px 4px;}

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-width|border-top-width|border-right-width|border-bottom-width: thin|medium|thick||inherit

Следующий параметр border-color с помощью которого можно управлять цветом рамки :

border-color: [цвет | transparent] {1,4} | inherit

Свойство позволяет задать цвет рамки сразу для всех сторон элемента или только для указанных. В качестве значения можно использовать принятые в html для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

p {border-width: 2px; border-color: red}

Значение transparent устанавливает прозрачный цвет рамки, а inherit наследует значение родителя. По умолчанию, если цвет рамки не задан, то будет использоваться тот, который используется для шрифта внутри данного элемента.

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent||inherit

И последний параметр border-style задает тип рамки :

border-style: {1,4} | inherit

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

Атрибуты стиля border-left-style, border-top-style, border-right-style и border-bottom-style задают стиль линий, которыми будет нарисована, соответственно, левая, верхняя, правая и нижняя сторона рамки:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit

Как и для параметров внешних и внутренних отступов, для рамки существует универсальное свойство border . Оно позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента:

border: | inherit

Значения могут идти в любом порядке, разделяясь пробелами:

td {border: 1px solid yellow}

Для установки границы только на определенных сторонах элемента существуют свойства border-top, border-bottom, border-left, border-right, которые позволяют задать параметры соответственно для верхней, нижней, левой и правой стороны рамок.

Осталось только подвести итоги:

  • для задания внутренних отступов пользуемся свойством padding ;
  • для настройки внешних отступов существует правило margin ;
  • параметры рамок задаются с помощью атрибута border .

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

На этом все, до новых встреч!

Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.

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

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

Hello, world!

Так будет выглядеть вариант без использования описанных выше свойств (верхний элемент) и с их использованием (нижний элемент):

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

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

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

Внутренний отступ с помощью CSS-свойства «padding»

Чтобы вы понимали всю логику вещей, возьмем для примера следующий фрагмент верстки:

Hello, world!

Hello, world!

со своими стилями:

Test_div { width: 250px; border: 1px solid; }

Визуальный вариант получается таким:


Что из себя представляет свойство «padding »? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:

Test_div { width: 250px; border: 1px solid; padding: 10px; // Внутренний отступ 10px }

Визуально это получается так:


Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

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

Первый – это с явным указанием сторон:

Padding-top: 10px; // Внутренний отступ 10px сверху padding-right: 10px; // Внутренний отступ 10px справа padding-bottom: 10px; // Внутренний отступ 10px снизу padding-left: 10px; // Внутренний отступ 10px слева

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

Padding: 10px 0 0 0; // Внутренний отступ 10px сверху, все остальное — 0px padding: 10px 0; // Внутренний отступ 10px сверху и снизу, а по бокам — 0px padding: 0 10px; // Внутренний отступ 0px сверху и сниз, а по бокам — 10px

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так : первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Если значения два (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.

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

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin » – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

Margin-top: 10px; // Внешний отступ 10px сверху margin-right: 10px; // Внешний отступ 10px справа margin-bottom: 10px; // Внешний отступ 10px снизу margin-left: 10px; // Внешний отступ 10px слева

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

Margin: 10px 0 0 0; // Внешний отступ 10px сверху, все остальное — 0px margin: 10px 0; // Внешний отступ 10px сверху и снизу, а по бокам — 0px margin: 0 10px; // Внешний отступ 0px сверху и сниз, а по бокам — 10px

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding », о нем написано выше.

Используем margin со следующим значением:

Test_div { width: 250px; border: 1px solid; margin: 10px; // Внешний отступ 10px }

Визуально это будет выглядеть так:


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

Важная особенность : если вы внимательно смотрели на результат, то могли заметить, что соседние отступы у элементов не суммируются. То есть если первый элемент имеет внешний нижний отступ, равный 10px, а второй – внешний верхний отступ с этим же значением, то общее расстояние между ними будет равно также 10px. Если 10 и 15 соответственно, то общее – 15 и так далее.

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

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

Для более красивого отображения элементов на web-странице применяют внешний и внутренний отступы в css и на примерах мы это сейчас разберём.

Каждый элемент, будь это параграф, div, картинка или видео, — это некий блок, в котором можно сделать отступы как внутри с помощью свойства padding , так и снаружи с помощью margin .

В css прописываются эти свойства для отступов таким образом (для примера взят параграф):

Вместо тега P вы пропишите свой элемент разумеется, для которого будут применены отступы.

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

Значения отступов.

  • Первое значение: отступ сверху;
  • Второе значение: отступ справа;
  • Третье значение: отступ снизу;
  • Четвёртое значение: отступ слева.

В данном примере я сделал margin внешний отступ в css таким образом: сверху я прописал 20px , слева и справа по 10px (как правило они для симметрии прописываются одинаковые), и снизу указал 30px .

А для padding внутреннего отступа я указал: по 10px сверху, слева и справа, и 14px снизу.

Значение для отступов в свойствах margin и padding можно сокращать, при условии если они имеют одинаковую величину.
Из моего примера сокращённая запись будет иметь такой уже вид:

То есть, когда отсутствует последняя числовая запись, в данном случае для отступа слева, то браузер автоматически подставляет для отступа слева такое же значение как и у значения справа.
И в моём случае отступы справа и слева будут по 10px что в margin , что в padding .

А если у вас одинаковые величины для внешних отступов сверху и снизу (к примеру: 16px ), и так же одинаковые величины для внешних отступов слева и справа (к примеру: 20px ), то запись будет иметь ещё более сокращённый вид:

Соответственно для внутреннего отступа css запись делается идентично этой.

Применение одинарных отступов: для каждой стороны отдельно.

Для указания отдельного отступа применяются следующие свойства с одним значением:

Свойства отступа для каждой стороны.

  • margin-top: 3px; внешний верхний отступ;
  • margin-left: 4px; внешний левый отступ;
  • margin-right: 6px; внешний правый отступ;
  • margin-bottom: 10px; внешний нижний отступ.

Точно так же прописываются записи и для внутренних отступов, только нужно заменить margin на padding .

К примеру у вас для всех картинок img уже прописаны в css все отступы.

То есть (для уяснения) внешний отступ имеет такие значения: сверху 10px , слева и справа: по 20px , и снизу 14px .
А внутренний отступ равен по 6px со всех 4-ёх сторон.

Допустим, вы решили поставить ещё картинку на страницу, но для неё вы хотите изменить только внешний отступ сверху, а остальные оставить как есть. И для выполнения этой задачи достаточно прописать class для этой картинки, и добавить в css дополнительную запись.

]]>

В итоге, добавленная вами картинка с классом verx примет все отступы прописанные в css для тега img , и изменит только внешний отступ для верхней стороны (в нашем случае: 40px ).

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

Facebook

Twitter

Вконтакте

Одноклассники

Google+

Изучаем margin padding и border

Создаем основную структуру сайта с помощью margin, padding и border. Изучаем box-model.

Транскрипт урока

Теперь нам просто необходимо создать отступы как между блоками, так и внутри блоков, а также было бы неплохо обозначить границы. Отступы между блоков создаются с помощью свойста margin, давайте добавим отступ у блока с классом header. .header { margin: 20px; } А если нам нужно указать конкретный отступ сверху, мы можем написать margin-top: 40px; Аналогично работают margin-bottom, left и right. Также, существует три вида скоращенного метода записи: margin: top, right, bottom, left; margin: top, left/right, bottom; margin: top/bottom, left/right; Теперь давайте коснемся отступов между контентом внутри блока и границей блока. Такие отступы называют padding. Давайте добавим его, и посмотрим, что получится. div { padding: 20px; } Как вы видите, теперь вокруг текста образовались отступы высотой в 20 пикселей. Варианты с top, bottm, right и left работают аналогично. И последнее для этого урока свойство — border. С помощью него задается граница вокруг слоя. Работает оно так: border: 3px dashed black; Первое значение определяет толщину границы, второе — стиль, а третье — цвет. В данном случае мы создали границу толщиной 3px, пунктирную и черного цвета. Но чаще всего границы делают сплошными, что обозначается словом solid. Давайте проверим. Все, что я вам рассказал — это называется box-model блочных тегов. Размер каждого тега состоит из размера контента + padding + толщина границы + margin. (картинка). Это знание поможет вам при вычислении размеров ваших блоков.

Скрипты для сайта

td, th {padding-left: 2px;
padding-top: 2px;
padding-right: 2px;
padding-botton: 2px }

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

.indented { padding-left: 2cm;
padding-right: 2cm }

Мы можем привязать такой стиль к абзацу и посмотреть, что получится. Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

  • Если указано одно значение, оно задаст величину отступа со всех сторон элемента Web-страницы.
  • Если указаны два значения, первое установит величину отступа сверху и снизу, а второе — слева и справа.
  • Если указаны три значения, первое определит величину отступа сверху, второе — слева и справа, а третье — снизу.
  • Если указаны четыре значения, первое задаст величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

  • Пример:

    td, th { padding: 2px }
    .indented { padding: 0cm 2cm 0cm 2cm }

    Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding. Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

    margin-left|margin-top|margin-right|margin-bottom: <отступ>|auto|inherit

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

    Пример:

    h2 { margin-top: 5mm }

    Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм. В качестве значений внешних отступов допустимы отрицательные величины:

    ul { margin-left: -20px }

    В этом случае Web-обозреватель создаст «отрицательный» отступ. Такой прием позволяет убрать отступы, создаваемые Web-обозревателем по умолчанию, например, отступы слева у больших цитат и списков. Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента Web-страницы:

    margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

    Этот атрибут стиля ведет себя так же, как его «коллега» padding.

    Пример:

    h2 { margin: 5mm 0mm }

    Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin-right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:

    border-spacing: <отступ 1> [<отступ 2>]

    Отступы могут быть заданы только в виде абсолютных значений.

  • Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.
  • Если указаны два значения, первое задаст величину отступа слева и справа, а второе — сверху и снизу.

  • Атрибут стиля применяется только к таблицам (тегу <table>). Здесь мы задали отступы между ячейками таблицы, равные одному пикселу.

    table { border-spacing: 1px }

    ВНИМАНИЕ!

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

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

    Свойство поля CSS


    Пример

    Установите поля для всех четырех сторон элемента

    равными 35 пикселям:

    p {
      поле: 35 пикселей;
    }

    Попробуй сам »

    Дополнительные примеры «Попробуйте сами» ниже.


    Определение и использование

    Свойство margin устанавливает поля для элемент и является сокращенным свойством для следующих свойств:

    Если свойство поля имеет четыре значения:

    • поля: 10px 5px 15px 20px;
      • верхнее поле 10px
      • правое поле 5px
      • нижнее поле 15px
      • левое поле 20px

    Если свойство поля имеет три значения:

    • поля: 10px 5px 15px;
      • верхнее поле 10px
      • правое и левое поля 5px
      • нижнее поле 15px

    Если свойство поля имеет два значения:

    • поля: 10px 5px;
      • верхнее и нижнее поля 10px
      • правое и левое поля 5px

    Если свойство поля имеет одно значение:

    • поле: 10 пикселей;
      • все четыре поля 10px

    Примечание: Допускаются отрицательные значения.

    Показать демо ❯

    Значение по умолчанию: 0
    По наследству: нет
    Анимация: да, см. отдельные свойства . Читать про анимированный Попробуй это
    Версия: CSS1
    Синтаксис JavaScript: объект .style.margin=»100px 50px» Попробуй это

    Поддержка браузера

    Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

    Собственность
    поле 1,0 6,0 1,0 1,0 3,5


    Синтаксис CSS

    margin: length |auto|initial|inherit;

    Значения свойств

    Значение Описание Демо
    длина Задает поле в пикселях, пунктах, см и т. д.Значение по умолчанию — 0. Отрицательное значение. допустимы значения. Читать о единицах длины Демонстрация ❯
    % Задает поле в процентах от ширины содержащего элемента Демонстрация ❯
    авто Браузер рассчитывает маржу Демонстрация ❯
    начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальный
    унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

    Свертывание поля

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

    Этого не происходит на горизонтальных (левых и правых) полях! Только вертикальный (Верх и низ) поля!

    Посмотрите на следующий пример:

    В приведенном выше примере элемент

    имеет верхнее и нижнее поле по 30 пикселей.

    элемент имеет верхнее и нижнее поле 20px.

    Это означает, что вертикальное поле между

    и

    должно быть 50 пикселей (30 пикселей + 20 пикселей). Но из-за коллапса маржи фактическая маржа заканчивается до 30px!


    Дополнительные примеры

    Пример

    Установите поле для элемента

    на 35 пикселей сверху и снизу и на 70 пикселей. пикселей для правого и левого:

    p {
      margin: 35px 70px;
    }

    Попробуй сам »

    Пример

    Установите поле для элемента

    на 35 пикселей сверху, 70 пикселей справа и слева и до 50 пикселей снизу:

    p {
      margin: 35px 70px 50px;
    }

    Попробуй сам »

    Пример

    Установите поле для элемента

    на 35 пикселей сверху, 70 пикселей справа, 50 пикселей внизу и до 90 пикселей слева:

    p {
      margin: 35px 70px 50px 90px;
    }

    Попробуй сам »

    Связанные страницы

    Учебник по CSS

    : CSS Margin

    Учебное пособие по CSS: блочная модель CSS

    Ссылка на HTML DOM: свойство margin



    Правила свертывания полей

    В CSS смежные поля иногда могут перекрываться.Это известно как «крах маржи», и он имеет репутацию довольно подлого.

    Вот типичный пример с двумя родственными абзацами:

     

    Вместо того, чтобы располагаться на расстоянии 48 пикселей друг от друга, их поля в 24 пикселя сливаются вместе, занимая одно и то же место!

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

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

    В этом уроке мы углубимся в детали и разберемся. Нет больше недоумения!

    Когда в спецификацию CSS добавили margin-collapse, разработчики языка сделали любопытный выбор: горизонтальные поля не должны схлопываться.

    Раньше CSS не предназначался для макетов.Люди, писавшие спецификацию, придумали заголовки и абзацы, а не столбцы и боковые панели.

    Итак, это наше первое правило: разрушаются только вертикальные поля.

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

    Code Playground

    P1

    P2

    p { отображение: встроенный блок; поле слева: 24px; поле справа: 24px; } Режимы записи

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

    Показать больше

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

     

    К сожалению, это отрицательно сказывается на наших полях:

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

    Что делать, если поля асимметричны? Скажем, верхнему элементу нужно 72 пикселя пространства внизу, а нижнему элементу нужно только 24 пикселя?

    Выигрывает большее число.

    Это кажется интуитивно понятным, если вы думаете о марже как о «личном пространстве». В этот исторический момент считается социально ответственным держаться на расстоянии 6 футов друг от друга. Если кто-то хочет еще больше места — скажем, 8 футов — нам нужно будет держать 8 футов друг от друга, чтобы удовлетворить оба требования к личному пространству.

    Ладно, вот тут начинаются странности.Рассмотрим следующий код:

     

    Мы помещаем наш первый абзац в блок, содержащий

    , но поля все равно схлопываются!

    Как это может быть? Что ж, оказывается, у многих из нас неверное представление о том, как работают поля.

    Маржа предназначена для увеличения расстояния между братьями и сестрами. Это , а не , предназначенное для увеличения зазора между дочерним элементом и ограничивающей рамкой его родителя; вот для чего нужна прокладка.

    Margin всегда будет пытаться увеличить расстояние между родственными элементами, , даже если это означает, что передает margin родительскому элементу! В этом случае эффект такой же, как если бы мы применили поле к родительскому

    , а не к дочернему

    .

    «Но этого не может быть!», я слышу, как вы говорите. «Раньше я использовал маржу, чтобы увеличить расстояние между родителем и первым потомком!»

    Есть несколько условий, которые должны быть выполнены для того, чтобы поле было передано родительскому элементу (и свернуто):

    • Никаких промежуточных элементов (см. предыдущее правило о
      ).

    • Родительский элемент не имеет набора высоты .

    • Родительский элемент не имеет отступов или границ вдоль соответствующего края.

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

    Вы можете думать о отступе/бордюре как о своего рода стене; если он находится между двумя полями, они не могут рухнуть, потому что на пути есть стена. Ширина тоже не имеет значения; даже 1px отступа будет мешать схлопыванию полей.

    Ссылка на этот заголовок

    Поля могут сворачиваться в одном направлении

    До сих пор все рассмотренные нами примеры включали смежные противоположные поля: низ одного элемента перекрывается с верхом следующего элемента.

    Удивительно, но поля могут схлопываться даже в одном направлении.

    Вот как это выглядит в коде:

     

    Вы можете думать об этом как о расширении предыдущего правила. Дочернее поле «впитывается» в родительское поле. Они объединяются и подчиняются тем же правилам коллапса полей, которые мы видели до сих пор (например, побеждает самый крупный).

    Это может привести к большим сюрпризам. Например, взгляните на распространенное разочарование:

    Code Playground

    Абзац первый

    <раздел>

    Абзац второй

    .синий { цвет фона: голубой; } .розовый { цвет фона: светло-розовый; } п { поле сверху: 32px; }

    Направленные поля

    Использовать направленные утилиты для применения поля к отдельной стороне или оси X и Y элемента.Направленные утилиты могут изменять или переопределять поля по умолчанию и могут использоваться со шкалой интервалов от 0 до 6.

    <дел>
    .mt-3
    .mr-3
    .mb-3
    .ml-3
    .mx-3
    .my-3

    Расширенные вертикальные поля

    Расширенная шкала начинается с разделителя 7 до 12 . Примечание : поддерживается только ось Y ( mt , mb и my ) и ее адаптивные варианты.

    .mb-7
    .mb-8
    .mb-9
    .mb-10
    .mb-11
    .mb-12

    Центральные элементы

    Использование mx-auto для центрирования элементов блока с заданной шириной.

    <дел>
    .mx-авто

    Мы также предоставляем авто с направленной маржей. mt-auto, mr-auto, mb-auto, ml-auto

    <дел>
    `mt-auto` переместит это поле вниз.
    `mb-auto` переместит это поле наверх.
    <дел>
    `ml-auto` сдвинет это поле вправо.
    `mr-auto` сдвинет это поле влево.

    Сбросить поля

    Сбросить поля, встроенные в элементы типографики или другие компоненты с m-0 , mt-0 , mr-0 , mb-0 , ml-0 , mx-0 и my-0 .

    <дел>

    В этом абзаце нет нижнего поля.