Отступы margin


Содержание

Свойство margin

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

Объединение отступов

Вертикальные отступы поглощают друг друга, горизонтальные – нет.

Например, вот документ с вертикальными и горизонтальными отступами:

Расстояние по горизонтали между элементами SPAN равно 40px , так как горизонтальные отступы по 20px сложились.

А вот по вертикали расстояние от SPAN до P равно 20px : из двух вертикальных отступов выбирается больший max(20px, 15px) = 20px и применяется.

Отрицательные margin-top/left

Отрицательные значения margin-top/margin-left смещают элемент со своего обычного места.

В CSS есть другой способ добиться похожего эффекта – а именно, position:relative . Но между ними есть одно принципиальное различие.

При сдвиге через margin соседние элементы занимают освободившееся пространство, в отличие от position: relative , при котором элемент визуально сдвигается, но место, где он был, остаётся «занятым».

То есть, элемент продолжает полноценно участвовать в потоке.

Пример: вынос заголовка

Например, есть документ с информационными блоками:

Использование отрицательного margin-top позволяет вынести заголовки над блоком.

Свойства PADDING и MARGIN и как их использовать

Сегодня мы поработаем над пониманием разницы между HTML padding ( внутренний отступ ) и margin ( внешний отступ ) в CSS . Но сначала разберемся с их синтаксисом. Существует несколько способов написания этих свойств: обычный и сокращенный:

Padding и Margin в CSS

Обычную форму записи рассматриваемых свойств проще понять, потому что она похожа на все остальные стилевые записи:

С другой стороны, сокращенная запись в CSS объединяет в себе все эти свойства в одно общее свойство « padding «.

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

Эту запись можно сократить запись до трех значений, если левый и правый padding/margin одинаковы. Например, если верхний отступ равен 30px , левый и правый по 10px , а нижний — 40px , то можно использовать следующую форму записи:

Сокращаем до двух значений!

Если верхний и нижний padding/margin одинаковы, а правый и левый padding/margin тоже одинаковы, то можно указывать только два значения. В этом примере у нас есть верхний и нижний отступы, которые равны 10px , а левый и правый отступы — по 20px . Наш CSS будет выглядеть следующим образом:

Только одно значение!

Наша последняя версия сокращенной записи для padding и margin HTML содержит только одно значение. Эту запись можно использовать, когда все отступы ( сверху, снизу, справа и слева ) имеют одно и то же значение. Если бы мы хотели, чтобы все стороны имели отступы по 20px , то CSS выглядел бы следующим образом:

Совет!

Когда какой формат записи использовать? Например, если нужно задать элементу только нижний отступ, я буду использовать обычную запись, так как нужно применить свойство только к одной стороне: padding-bottom: 30px ;

Как работать с PADDING и MARGIN

Между этими двумя свойствами существует ощутимая разница. Padding используется для задания пространства внутри контейнера HTML-элемента . Margin используется для задания пространства вокруг внешней границы элементов.

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

Также можно думать о padding как о наполнителе в картонной коробке. Когда вы наполняете коробку пенопластом, вы удерживайте им содержимое на расстоянии от краев коробки. Padding в CSS делает то же самое.

Теперь подумайте о margin как о невидимом силовом поле вокруг вас. Силовое поле ограждает другие вещи от вас. Возвращаясь к примеру с пальто и краской, если бы я бросил в вас краску, и она была бы в состоянии пройти через силовое поле, то она по-прежнему покрыла бы только вас и ваше пальто.

PADDING и MARGIN на примере сайта

Рассмотрим свойства на примерах с элементами. Мы начнем с абзаца ( тега

), затем добавим к нему цвет фона и добавим отступ 30px с каждой стороны.

Ниже слева видно, что это абзац с padding 30px вокруг него. На изображении справа я использовал инструменты Google Chrome , чтобы показать, где padding HTML начинается /заканчивается для этого элемента. Зеленый цвет на изображении ниже – это padding , который расположен вокруг контейнера. Темно-синий цвет фона заполняет внутреннюю область:

Теперь добавим margin абзацу. Я добавлю отступ сверху и снизу 30px , а также 20px слева и справа. Ниже на изображении слева показано, как этот абзац изменился с margin . Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент . Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin :

Если вы до сих пор путаетесь, как использовать padding и margin HTML , то пришло время экспериментировать! Чем больше вы будете использовать свойства CSS , и изменять их значения, тем лучше поймете, как они работают.

Данная публикация представляет собой перевод статьи « CSS PADDING VS. MARGIN AND HOW TO USE THEM » , подготовленной дружной командой проекта Интернет-технологии.ру

Отступы и рамки в CSS с помощью параметров margin, padding и border

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

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

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

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

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

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

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

Внутренние отступы в 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 позволяет указать отступы сразу со всех сторон элемента веб-страницы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для текущего абзаца сделаем толщину верхней рамки 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 для цветов способы их задания: шестнадцатеричный код, ключевые слова и т.д.:

Значение 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: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] <1,4>| inherit

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

CSS свойство margin

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

  • margin: 10px 5px 15px 20px;
    • верхний отступ 10px
    • правый отступ 5px
    • нижний отступ 15px
    • левый отступ 20px
  • margin: 10px 5px 15px;
    • верхний отступ 10px
    • правый и левый отступы 5px
    • нижний отступ 15px
  • margin: 10px 5px;
    • верхний и нижний отступы 10px
    • правый и левый отступы 5px
  • margin: 10px;
    • все четыре отступа 10px

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

CSS синтаксис

Возможные значения

Значение Описание
auto Браузер автоматически устанавливает размер отступов.
размер Устанавливает размер отступов в единицах CSS — пикселях (px), сантиметрах (cm) и т.д. Значение по умолчанию 0.
% Устанавливает размер отступов в процентах от ширины родительского элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем размер отступов параграфа со всех четырех сторон

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

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой.

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

Исходя из данного примера размер нижнего отступа элемента

установлен в 30px, а размер верхнего отступа элемента

Здавый смысл говорит, что вертикальный отступ между элементами

должен быть 50px (30px + 20px). Однако из-за эффекта схлопывания в дейстительности это значение будет 30px.

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

Схлопывание не срабатывает:

  • для элементов, у которых на стороне схлопывания задано свойство padding.
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для элемента .

Padding, Margin и Border — задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу продолжить тему изучения CSS (каскадных таблиц стилей) и рассмотреть те стилевые правила, которые позволяют задать отступы и границы для Html элементов: border, margin и padding.

До этого мы успели изучить довольно-таки простые свойства, которые управляли шрифтами (Font Weight, Family, Size, Style), текстом (text-decoration, vertical-align, text-align) и рассмотрели модель формирования фона в CSS через background.

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

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

Блочная модель в CSS — padding, margin и border

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

При просмотре информации о любом Html теге веб страницы, этот плагин на вкладке «Макет» позволяет увидеть очень наглядное представление отступов и границ данного элемента относительно родительского и тех тегов (или же содержимого), которые заключены внутри оного (матрешка такая получается):

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

Если начинать рассматривать эту матрешку изнутри, начиная с содержимого, то дальше идет область внутреннего отступа от этого содержимого до рамки этого тега. Размер области задается с помощью CSS правила Padding, а ширину рамки можно задать с помощью Border.

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

Сразу оговорюсь, что вы можете задавать Padding и Margin, а также размеры рамки Border отдельно для каждой из сторон блока (прямоугольной области), которые определяются как:

  1. top (верх) — например, padding-top, margi-top, border-top
  2. bottom (низ)
  3. left (слева)
  4. right (справа)

Ну и для примера посмотрим, что именно будут обозначать border, margin и padding применительно к каким-то конкретным сторонам блочной модели:

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

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

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

Margin (top, bottom, left, right) — внешние отступы в CSS

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

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

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

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

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

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

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

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

И это будет означать, что браузер сверху от нашего блока должен сделать отступ в 20 пикселей, справа — в 10, снизу — в 40, а слева — в 30. Т.е. эта запись будет эквивалентна такой:

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

    Если величины внешних отступов слева и справа будет одинаковыми, например, так:

То последнее можно будет опустить:

Эти две записи сборного правила делают одно и то же. Поэтому, если вы видите запись с тремя величинами в Margin, то величину четвертого (справа) можно будет подсмотреть во втором (слева).

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

Если кроме равенства внешних отступов слева и справа имеет место быть равенство их величин сверху и снизу:

или, что то же самое (в силу пункта 1):

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

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

или, что то же самое (в силу пункта 2):

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

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

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

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

Например, если для верхнего блока задано следующее:

То нижний марджин верхнего блока (200px) поглотит в себе верхний марджин нижнего (100px, да и даже если он станет равен 199px ничего не изменится) и результирующий внешний отступ между этими двумя блоками все равно будет равен 200px. Т.е. в расчет принимается только лишь больший по модулю Margin, и он никак не складывается со встречным значением соседнего по вертикали элемента.

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

Например, в этом случае:

Результирующий отступ между блоками будет равен -10px, т.е. нижний на 10px наедет на верхний Html элемент.

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

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

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

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

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

Padding и border — внутренние отступы и рамки

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

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

Проценты в нем считаются точно так же, как в Margin — относительно ширины контейнера (области контента родительского элемента), в котором заключен наш элемент. Сборное правило Padding в Css формируется и подчиняется тем же законам, что и рассмотренное чуть выше:

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

И последнее, что сегодня я хотел бы рассмотреть — это рамки, которые задаются с помощью Border. У них есть три типа параметров:

  1. Border-width — задает толщину рамки
  2. Border-color — задает ее цвет
  3. Border-style — тип рамки или же тип линии, которой она будет отрисована

У всех этих трех CSS правил имеется допустимый набор значений:

Ширина линии для рамки (Border-width) может задаваться как с помощью цифр в Em, Ex или Px, так и словами:

  1. Thin — тонкая линия;
  2. Medium — средняя (данное значение используется по умолчанию);
  3. Thick — толстая.

В качестве значения для цвета рамки (Border-color) можно использовать принятые для цветов в Html способы их задания (шестнадцатеричный код, слова и т.д.):

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

  1. None — без рамки (используется по умолчанию)
  2. Dotted — линия отрисовывается точками
  3. Dashed — пунктиром
  4. Solid — сплошной линией
  5. Double — двойной линией
  6. Groove — вдавленная рамка
  7. Ridge — выпирающая
  8. Inset и outset — игры с тенью

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

Тоже самое будет касаться и сборного правила Border — оно может быть прописано как для всех сторон одновременно (Border), так и для каждой из сторон в отдельности (Border-top, left, bottom и right). Порядок следования значений не важен:

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

Как установить CSS margin и padding (и крутые советы по раскладке)

Дата публикации: 2020-05-17

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

Блочная модель

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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


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

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

Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.

С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.

По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.

Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:

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

Установка margin и padding

С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:

Если записано два значения padding, то первое значение отвечает за верхний и нижний отступ, а второе за левый и правый padding:

Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:

Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Что нужно помнить

Используйте правильные единицы измерения

При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.

Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.

Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.

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

Как браузеры вычисляют margin и padding для разных единиц измерения

Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.

Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.

В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.

Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт».

Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.

Схлопывание margin’ов

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

Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.

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

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

В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов» от Adam Roberts.

Интересные способы применения margin и padding

Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:

Центрирование элементов внутри родителей

С помощью margin очень просто центрировать блочные элементы внутри родителя. Нужно всего лишь поставить margin-left и margin-right в auto.

Значение и возможности Margin в CSS

Magrin в CSS регулирует внешние отступы элементов. Элементы в html — это прямоугольники. Они имеют границы, поля и отступы.

Область полей (margin) — пространство за пределами границ элемента. Свойство используется для задавания расстояния между элементами и позиционирования их на странице.

Отступы

Свойство Margin в CSS может иметь значение в %, px, vh/vw, em и rem. Значение Margin может наследоваться от родительского элемента (inherit) или автоматически рассчитываться браузером (auto). Значения для Margin в CSS можно прописать множеством способов (приведены примеры в em — масштабируемых единицах, зависящих от размера шрифта элемента).

Способы задания значения отступам:

  • для каждой из сторон (top, right, bottom, left) элемента (например, указано значение верхнего внешнего отступа от края элемента center);

.center < margin-top: 1em; >

  • для противоположных сторон (сначала указывается значение для top и bottom, потом для left и right);

.center < margin: 1em, 0.5em; >

  • для трех сторон (первым указывается значение для margin-top, вторым — для left и right, третьим — для bottom);

.center < margin: 0em 1.1em 2em; >

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

.center < margin: 0.5em 1em 1.5em 2em; >

  • значение элемента margin может быть одинаково для каждой стороны;

.center < margin: 1em; >

  • значение для margin может быть не задано;
  • значение margin может быть отрицательным, например, в CSS margin-top с отрицательным значением перемещает элемент вверх;

.center < margin-top: -1em; >

  • отрицательное значение margin может быть у всех сторон элемента, и тогда он «высвобождает» место для окружающих его элементов снизу и справа и «наезжает» на левый и верхний элементы;

Отрицательный отступ

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

С помощью отрицательных margin-left и margin-top можно «сдвинуть» элемент влево или вверх. Если на месте, куда перемещается элемент, уже есть объекты, тогда он их перекрывает.

Margin-bottom и margin-right не влияют на положение элемента, к которому применяются, но для других объектов он становится меньше. Благодаря этому на картинке блок с именем автора цитаты «залез» на блок с цитатой.

Auto и inherit

Использование auto в CSS у margin и text-align со значением center оказывают схожее действие. Auto центрирует элемент по горизонтали на равном расстоянии от границ контейнера.

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

Использование значения inherit подразумевает наследование значения от элемента-родителя. Допустим, родительскому элементу прописано значение в CSS margin-left, у элемента center стоит значение, указанное в предыдущем примере.

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

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

Соседние элементы

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

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

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

Вложенные элементы

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

На картинке приведены примеры поведения элементов и тогда, когда значения margin у родительского и дочернего элементов различны. Как видно, если у дочернего указано значение margin-top больше, чем у родительского, то родительский смещается именно на значение, указанное у дочернего элемента.

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

Пустые элементы

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

Исключения и правила

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

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

Несколько общих правил использования margin:

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

Margin в CSS — одно из свойств элемента, позволяющее управлять его расположением на странице по отношению к другим объектам. У свойства есть четыре вариации, позволяющие изменять положение элемента по горизонтали и вертикали. Одной из проблем использования margin является схлопывание отступов (объединение двух отступов в один).

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента

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

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

Краткая информация

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

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

Табл. 1. Зависимость от числа значений

Число значений Результат
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего краёв, второе — от левого и правого.
3 Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

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

auto Указывает, что размер отступов будет автоматически рассчитан браузером.

Песочница

Пример

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin

Объектная модель

Примечание

Internet Explorer до версии 7 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto . Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

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

Схлопывание не срабатывает:

  • для элементов, у которых на стороне схлопывания задано свойство padding .
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т. е. таких, у которых position установлено как absolute ;
  • на плавающих элементах (для них свойство float задано как left или right );
  • для строчных элементов;
  • для .

Спецификация ?

Спецификация Статус
CSS Basic Box Model Рабочий проект
CSS Transitions Рабочий проект
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

3 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Свойства margin, padding, border

Свойства margin, padding, border

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

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

Границы элементов

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

  • величина — px или %
  • тип — none | sol >Все это записывается одной строкой вот такого вида border: 1px sol >

С размером и цветом все понятно, давайте разберем значения типов нашей рамки:

  • none — нет типа ( по умолчанию)
  • sol >Мы указывали всему элементу рамку, когда писали свойство border, но можно задавать рамку какой-то одной стороне элемента, и пишется это следующим образом:

Закругленные края границы элемента

Помимо рамки элементу можно задавать закругленность углам. Можно задавать значения как одному углу, так и всем сразу.

  • border-top-left-radius: величина | %
  • border-top-right-radius: величина | %
  • border-bottom-left-radius: величина | %
  • border-bottom-right-radius: величина | %

Выше мы задаем значение закругленности всем четырем углам по отдельности, а вот так можно это сделать более сокращенной записью:border-radius: 20px. Помимо такого задания значения можно еще задавать вот так: border-radius: 20px 10px. Но будьте внимательны, первая часть значения (20px) это два угла верхний левый и нижний правый, то есть работает по диагонали, а вот вторая часть значения (10px) это верхний правый и нижний левый.

Также можно одной строкой записать значения для всех четырех сторон вот таким образом: border-radius: 20px 10px 20px 10px, где значения идут с верхней левой стороны и по часовой. Со скругленными углами я думаю мы разобрались, приступим к другим не менее важным свойствам элементов.

Внутренние отступы в элементах страницы

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

  • padding-top: величина | %
  • padding-right: величина | %
  • padding-bottom: величина | %
  • padding-left: величина | %

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

А теперь проведем небольшой эксперимент, давайте создадим параграф с количеством текста на три строки в браузере и во второй строке по средине любое слово возьмем в span и зададим ему некий id, после этого в стилях пропишем этому span цвет фона, рамку и внутренний отступ в 20px, сохраняемся и смотрим в браузере на результат.

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

Давайте просмотрим второй вариант записи внутреннего отступа для элементов: padding: 20px 10px. Первое число отвечает за вертикаль (верх и низ), а второе за горизонталь (лево и право).

Еще одним значением может быть трех числовая запись: padding: 20px 15px 10px, где первое значение 20px — верх (top), второе значение 15px — лево и право, а третье значение 10px — это низ (bottom).

Ну и последнее значение, которое состоит с четырех частей: padding: 20px 10px 20px 10px, ну и здесь все просто, по часовой стрелке начиная с верху — top, right, bottom, left.

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

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

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

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

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

  • margin-top: величина | % | auto
  • margin-right: величина | % | auto
  • margin-bottom: величина | % | auto
  • margin-left: величина | % | auto

Здесь все понятно, для каждой из сторон мы задаем свое значение отступов. А вот такая запись: margin: 20px задает отступы со всех сторон на одинаковое расстояние. Ну и для напоминания:

  • margin: 20px 10px — вертикаль — горизонталь
  • margin: 20px 15px 10px — top горизонталь bottom
  • margin: 20px 10px 20px 10px — по часовой с верху
  • margin: 20px auto — по вертикали 20px, а по горизонтали по центру

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

Работа со свойством overtflow

Есть ситуации, в которых содержимое какого-либо фиксированного по ширине и высоте элемента не помещается в нем и тогда происходит вытекание этого содержимого за пределы элемента. В таком случае есть у нас свойство задающее следующие значения: overflow: visible | hidden | scroll | auto. По умолчанию стоит значение visible, что говорит показывай все, даже все то, что не помещается внутри. Значение hidden говорит свойству overflow обрежь все под чистую.

Но есть еще такое значение, как scroll, а вот это значение не вынесет за пределы содержимое, но даст возможность скролить содержимое, которое можно перелистать мышей. Но в данном случае скролл будет применен и к тем элементам, которые даже вмещают содержимое, а нам это не нужно. Вот здесь на выручку идет последнее значение auto, которое автоматически подставит значение наиболее удобное в нашем случае.

Но помимо этого всего можно задавать значения принудительно по осям x и y:

    overflow-x: visible | h >Здесь я думаю понятно, что по иксам, это вправо, а по игрикам это вниз.

Применение свойства float

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

Элемент, которому задается свойство float со значением к примеру left, будет задано следующее: Он прижмется к левому краю и все что за ним идет будет его обтекать с права. На простом примере рассмотрим, как это происходит на деле:

CSS: margin. Внешний отступ.

Свойство CSS margin устанавливает внешний отступ элемента, то есть расстояние от его границы (свойство border) до внутренней границы его родительского элемента. Если нет родительского элементы, то отступом будет расстояние до края окна браузера. Следует помнить, что у края окна браузера есть свои отступы.

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

Давайте рассмотрим пример. Вот его CSS-код:

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

Теперь давайте рассмотрим, как он работает.

Класс .div-example-1 создаёт контейнер, внутри которого мы будем играть с абзацем с классом .p-example-1 , устанавливая ему разные значения. У класса .div-example-1 есть CSS правило margin: 0 auto; . Мы видим два значения: 0 и auto. Первое значение устанавливает величину отступа для верхней и нижней грани, второе значение устанавливает размер отступа по бокам. Первое значение равно 0 и оно указывает, что верхнего и нижнего отступа нет, ноль он и есть ноль. Значение auto автоматически центрирует блок, делая правый и левый отступ одинаковыми.

Класс .p-example-1 создан в форме красного квадрата при помощи правил ширина: width: 50px и высота: height: 50px , размер стороны квадрата 50 пикселей.

Мы видим расстояние между красным квадратом и чёрной границей внешнего блока по 10 пикселей везде, кроме правой стороны. Это и есть внешней отступ, заданный в правиле margin: 10px; класса .p-example-1 .

Давайте изменим ширину красного блока на 100%.

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

Мы видим, что красный блок вышел за границу блока-родителя в правой стороне. Почему так произошло? Дело в том, что когда мы установили ширину красного блока равную 100%, то он занял весь родительский блок. После этого к этим 100% мы добавили ещё 10 пикселей отступа. В результате красный блок смещается, так как его суммарная ширина превышает ширину родителя. Подробнее про это можно прочитать в статье: Блочная модель CSS.

Давайте попробуем решить эту проблему. Для этого достаточно просто удалить свойство width: 100%; в классе .p-example-3 :

Всё работает нормально. Браузер по умолчанию растянет блок на всю ширину блока-родителя. И эта ширина не является аналогом правила width: 100%; . Это нужно понимать.

  • свойство margin может иметь одно значение, тогда оно устанавливается для отступов со всех сторон блока;
  • свойство margin может иметь два значения: первое указывает величину верхнего и нижнего отступа, а второе — правого и левого.
  • для свойства margin можно установить значение auto , которое автоматически разместит блок.

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

Давайте приведём пример такого CSS правила:

Обратите внимание, для класса .div-example-4 прописано правило display: inline-block; , то есть я сдела его строчно-блочным элементом. Я это сделал, чтобы его чёрная граница по ширине была равной его содержимому. А содержит он в себе только абзац с классом .p-example-4 . У этого абзаца есть свойство margin: 10px 20px 30px 70px; , и в работе примера видно, что все внешние отступы у блока разные.

Также обратите внимание, что фоновый цвет, указанный в правиле background-color: #F00; , не распространяется на внешний отступ CSS margin. Внешние отсупы всегда прозрачные и эти поля приобретают цвет блока родителя.

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

Давайте подведём итоги, представим в форме таблицы все варианты значений свойства CSS margin:

Табл. CSS margin: количество значений

Число значений Результат
1 Значение используется для установки всех отступов элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе — от боковых.
3 Первое значение задает отступ от верхнего края, второе — для боковых краёв, а третье — от нижнего края.
4 Устанавливается отступ для каждого края отдельно по часовой стрелке начиная с верхнего.

Также нужно помнить про возможность использования конструкции margin: 0 auto для выравнивания блока по центру.

Ну и нужно помнить, что область внешних отступов не заливается фоновым цветом (свойство background-color).

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

Установка внешних отступов CSS margin для каждой стороны

Кроме вышеописанного свойства CSS margin, для задания величины каждого отступа существуют ещё четыре свойства:

  • margin-top — устанавливает границу для верхнего отступа;
  • margin-right — устанавливает границу для правого отступа;
  • margin-bottom — устанавливает границу для нижнего отступа;
  • margin-left — устанавливает границу для левого отступа.

Возникает закономерный вопрос: зачем нужны эти свойства, если есть свойство CSS margin? Бывают случаи, когда без них никак. Например, мы работаем в панели администрирования чужого сайта, у нас нет доступа к редактированию файла CSS, а нам нужно увеличить только верхний отступ тега h2, а остальные не править. Мы добавляем этому тегу атрибут style=»margin-top: 20px» . Так мы меняем только верхний отступ, остальные остаются без изменений, чего нельзя сделать при помощи style=»margin: 20px» .

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

Илон Маск рекомендует:  Шаблон детского сайта HTML, CSS, JS
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL