Эта инструкция позволит вам лучше понимать такие свойства CSS, как border, padding и margin. Эти свойства очень помагают разработчикам позиционировать элементы на странице в соответствии с макетом.
Давайте создадим div и присвоим ему свойства margin, padding и border.
Свойство PaddingCSS свойство padding определяет расстояние между границей элемента и его содержимым. Вы можете определить его следующим образом:
- padding-top: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
Эту запись можно сократить:
- padding:25px 50px 75px 100px;
- сверху 25px
- справа 50px
- снизу 75px
- слева 100px
- padding:25px 50px 75px;
- сверху 25px
- справа и слева 50px
- снизу 75px
- padding:25px 50px;
- сверху и снизу 25px
- справа и слева 50px
- padding:25px;
- все 25px
Внимание: значение padding добавляется к ширине элемента и зависит от фона элемента.
Иначе говоря у нас есть элемент div с классом div-1:
Div.div-1{ width:150px; padding: 25px;}
Браузер добавит к ширине элемента левый и правый padding. В результате мы получим элемент шириной 200px.
Свойство BorderCSS свойство border позволяет вам определять стиль и цвет границы элемента.
border-widthСвойство border-width применяется для определения ширины границы. Ширина задается в пикселях или с помощью одного из предопределенных значений: thin (тонкая), medium (средняя) или thick (толстая).
border-colorСвойство border-color применяется для определения цвета границы. Цвет может быть задан следующими способами:
- название — название цвета, например, «red»
- RGB — определяет RGB значение, например, «rgb(255,0,0)»
- Hex — определяет hex значение, например, «#ff0000»
- dotted : Определяет точетную границу
- dashed : Определяет пунктирную границу
- solid : Определяет толстую границу
- double : Определяет две границы. Расстояние между ними зависит от значения border-width
- groove : Определяет объемную вдавленную границу
- ridge : Определяет объемную выпуклую границу
- inset : Определяет границу так, что блок качется вдавленным
- outset : Определяет границу так, что блок качется выпуклым
Вы можете записать свойства границы элемента укороченным образом:
Div.div-2{ border:1px solid #ccc; }
Свойство MarginCSS свойство margin определяет расстояние вокруг элемента. Margin освобождает расстояние вокруг элемента (снаружи от border). Margin не имеет цвета фона и всегда остается прозрачным.
Вы можете определить значения margin для элемента следующим образом:
- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;
Эту запись можно сократить:
- margin:25px 50px 75px 100px;
- сверху margin 25px
- справа margin 50px
- снизу margin 75px
- слева margin 100px
- margin:25px 50px 75px;
- сверху margin 25px
- справа и слева margin 50px
- снизу margin 75px
- margin:25px 50px;
- сверху и снизу margin 25px
- справа и слева margin 50px
- margin:25px;
- все четыре margin 25px
Используя значения margin по умолчанию вы можете расположить блок по центру грризонтально.
- Tutorial
Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.
Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Основные принципы:
Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.
Отступы идут в направлении потока дом дерева
, блок сам себя не толкает.
Изначально он находится в статическом положении, и получает какое-то воздействие, за счет других.
В примере 3 списка, в следующей структуре:
- Далеко-далеко, за словесными.
Не за счет дочерних элементов, а за счет соседних делается отступ.
В этой ситуации.main-section__item и является последним возможным, кому можно задать отступ, чтоб разделить списки. Такого же эффекта можно добиться, если задать отступ диву, списку, лишке, ссылке, но это будет не правильно.
Этот пример довольно простой. Но если представить на много большую вложенность, где кто-то намусорил отступами, когда какие-то маргины схлопываются. а какие-то суммируются с падингами.
headline in a section of seven words
Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.
Самая простая причина, по которой стоит придерживаться данного принципа, это чтоб было проще найти отступ в будущем, либо вам, либо тому, кто будет в дальнейшем работать с вашей версткой. Это если говорить про удобство.
Настоящие проблемы могут возникнуть, когда верстка с плохой структурой отступов выводится динамически или дублируется.
Отступы нельзя задавать для независимых элементов (БЭМ блок) Никогда не делайте отступы элементам, которые могут использоваться больше чем один раз. Даже если вы не придерживаетесь методологий, учитывайте перспективу. Для этого есть обертки. Обертки это хорошо. Либо дополнительные классы.Если нужно сделать блоку отступ . Без ущерба это делается с помощью:
- Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
- Добавление класса (можно сделать блок элементом).
- Обертка (как блок, у которого роль, только в позиционировании).
Это горизонтальное меню и логотип (который почему-то справа).
Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img . О чем говорилось во втором принципе.
Возьмем другой пример:
...
10.10.10
...
...
Интересует нас отступ между новостями, которые задается.blog-preview__item { margin-bottom: 20px; } . Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview . О чем говорилось во втором принципе.
Чаще чем другие псевдоклассы, надо использовать:last-child.
Item:not(:last-child) { margin-bottom: 20px; } // или // .item { // другие стили // margin-bottom: 20px; &:last-child { margin-bottom: 0; } } // или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего // .item + .item { margin-top: 20px; } // или // .item { // другие стили // & + & { margin-top: 20px; } }
Исключения
Конечно есть частные случаи, нетривиальные задачи, и нюансы, при которых невозможно придерживаться этих принципов, но в остальном стоит стремиться к идеальным отступам, чтоб сделать верстку максимально чистой.
P. S. Советую ознакомиться с публикацией
Шастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
.block {
width: 160px;
height: 160px;
background-color: red;
margin-top: 40px;
margin-left: 70px;
padding-top: 40px;
padding-left: 40px;
}
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и paddingПри использовании padding, размеры padding"а должны вычитаться из высоты и ширины блока, в противном случае размер блока увеличится на размер padding"а.
Если какому-то блоку задать margin-left и margin-right со значениями auto, то если у блока имеется фиксированная ширина (например 400px) и нет CSS-свойста float, то этот блок будет выровнен по центру элемента, в котором он находится. Собственно для нерезиновой вёрстки с выравниванием по центру этот способ выравнивания обычно и используется. Несмотря на то, что IE 5.5 и младше значение auto не поддерживают, это всё равно не мешает его всё время использовать=).
Нежелательно использование padding и margin в таблицах, потому что эффект будет непредсказуемым в различных браузерах.
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
Статьи iT заметки HTML&CSS Запомним навсегда: чем отличаются margin и paddingШастая по форумам наткнулся на то, что до сих пор возникает вопрос, что делает padding , а что margin , и какие отличия между ними. Именно поэтому я решил напомнить об этом. Итак, не прибегая к заумным фразам поставим задачу и разберём пример, на котором всё станет ясно.
Задача : на странице нужен блок красного цвета (200х200 пикселей), который отступает от краёв браузера сверху и слева на 40 и 70 пикселей соответственно, и текст внутри которого отступает слева и сверху на 40 пикселей.
Решение : смотрим на рисунок и на код. Наш блок красного цвета не должен превышать 200 на 200 пикселей и он должен иметь отступ от краёв браузера (или других блоков контента). Собственно эти отступы мы делаем через margin. Если мы делаем padding, то отступ происходит внутри нашего красного блока и отступы получаются с фоном самого блока (то есть красные).
200?"200px":""+(this.scrollHeight+5)+"px");">
.block {
width: 160px;
height: 160px;
background-color: red;
margin-top: 40px;
margin-left: 70px;
padding-top: 40px;
padding-left: 40px;
}
текст, текст, много текста, много - много текста текста
Помимо использованных свойств (строки 6-9) есть ещё свойства margin-right, padding-right, margin-bottom, padding-bottom - они для отступов справа и снизу соответственно. Значения всех этих свойств могут быть в пикселях (px), процентах (%), либо в единицах em.
В принципе вот оно и всё. Однако есть ещё некоторые особенности работы с ними.
Особенности margin и padding
И последнее, что я хотел сказать. Не забывайте использовать сокращённые конструкции записи, например margin: 10px 0 5px 20px;. Если отступ нулевой, то ставить можно просто нолик, без указания параметров. Запомнить какой из параметров к какой границе относится очень просто - для блока отступы идут по часовой стрелке: первое число - сверху, второе - справа, третье - снизу, четвёртое - слева.
Вот собственно и всё, что я хотел рассказать сегодня. Всем счастливых выходных!
+
В этой теме Вы можете задать вопрос о материале.
19 ответов
TL; DR: по умолчанию я использую поле везде, кроме случаев, когда у меня есть рамка или фон, и я хочу увеличить пространство внутри этого видимого поля.
Для меня самая большая разница между отступом и полем заключается в том, что вертикальные поля автоматически сжимаются, а отступы - нет.
Рассмотрим два элемента, один над другим, каждый с отступом 1em . Этот отступ считается частью элемента и всегда сохраняется.
Таким образом, вы получите содержимое первого элемента, за которым следует заполнение первого элемента, затем дополнение второго, а затем содержимое второго элемента.
Таким образом, содержимое этих двух элементов в конечном итоге будет 2em на 2 элемента.
Теперь замените этот отступ с полем 1em. Поля считаются за пределами элемента, и поля смежных элементов будут перекрываться.
Таким образом, в этом примере вы получите содержимое первого элемента, за которым следует 1em комбинированного поля, а затем содержимое второго элемента. Таким образом, содержание этих двух элементов находится на расстоянии 1 1em .
Это может быть очень полезно, когда вы знаете, что хотите сказать 1em расстояния между элементами, независимо от того, с каким элементом он находится рядом.
Два других больших различия заключаются в том, что отступы включены в область щелчка и цвет фона/изображения, но не в поле.
Лучшее, что я видел, объясняя это примерами, диаграммами и даже "попробовать сами", - это .
Нижеприведенная диаграмма дает мгновенное визуальное представление о различии.
Одна вещь, о которой следует иметь в виду, - это браузеры, совместимые со стандартами (IE quirks - это исключение) отображает только часть контента в заданную ширину, поэтому отслеживайте это в расчетах компоновки. Также обратите внимание на то, что в рамке окна видна поддержка с поддержкой Bootstrap 3 .
MARGIN vs PADDING :
Маржа используется в элементе для создания расстояния между этим элементом и другими элементами страницы. Если отступы используются для создания расстояния между содержимым и границей элемента.
Маржа не является частью элемента, где дополнение является частью элемента.
Есть больше технических объяснений для вашего вопроса, но если вы ищете способ подумать о марже и дополнении, которые помогут вам выбрать, когда и как их использовать, это может помочь.
Сравните элементы блока с картинками, висящими на стене:
- Окно браузера похоже на стену.
- контент похож на фотографию.
- margin похож на пространство между изображениями в рамке.
- дополнение похоже на матирование вокруг фотографии.
- Граница аналогична границе кадра.
При решении вопроса о марже и отступе полезно использовать эмпирическое правило margin , когда вы располагаете элемент в отношении к другим вещам на стене и дополнением . > когда вы настраиваете внешний вид самого элемента. Маржа не изменит размер элемента, но отступы обычно делают элемент больше 1 .
1 Эта модель окна по умолчанию может быть изменена с помощью атрибута box-sizing .
Что касается полей, то вам не нужно беспокоиться об ширине элемента.
Как и когда вы даете что-то {padding: 10px;} , вам нужно уменьшить ширину элемента 20px , чтобы сохранить " fit " и не нарушать другие элементы вокруг него.
Поэтому я обычно начинаю с использования paddings, чтобы получить все " packed ", а затем использовать поля для небольших настроек.
Еще одна вещь, о которой нужно знать, - это то, что paddings более совместимы в разных браузерах, и IE не очень хорошо относится к отрицательным полям.
Вот несколько HTML, которые демонстрируют, как padding и margin влияют на кликабельность и заполнение фона. Объект получает клики по своему дополнению, но нажимает на область margin"d объектов, чтобы перейти к ее родительскому объекту.
$(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); .outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; }
Поля очищают область вокруг элемента (вне границы), но добавка очищает область вокруг содержимого (внутри границы) элемента.
это означает, что ваш элемент не знает о его внешних границах, поэтому, если вы разрабатываете динамические веб-элементы управления, я рекомендую использовать прописку и маржу, если вы можете.
обратите внимание, что несколько раз вам нужно использовать margin.
В CSS есть два способа создать пространство вокруг ваших элементов: поля и padding. В большинстве сценариев использования они функционально идентичны, но, по правде говоря, они ведут себя несколько иначе. Существуют важные различия между полями и отступом, которые вы должны учитывать при выборе того, что нужно использовать для перемещения элементов вокруг страницы. Тем не менее, в тех случаях, когда любые поля или отступы могут использоваться для одного и того же эффекта, многие решения сводятся к личным предпочтениям.
Когда использовать поля
Вы хотите, чтобы ваш интервал появлялся за пределами поля, созданного свойством border. Поля лежат за пределами границ, поэтому вы используете их, если хотите, чтобы ваша граница оставалась в одном месте. Это может быть полезно, если у вас есть, например, боковая панель с рамкой, которую вы хотите отойти от основной области содержимого.
Вы не хотите, чтобы цвет фона или изображение вторгались в ваше личное пространство. Фоновые цвета и изображения останавливаются на границе, поэтому, если вы скорее сохраните свои фоны вне пространства, которое вы делаете, поля - это свойство, которое вы хотите.
Вы хотите сбрасывать пространство сверху и снизу вашего элемента. Верхний и нижний поля ведут себя иначе, чем боковые поля, в том случае, если два поля расположены поверх друг друга, они сворачиваются до размера самого большого набора полей. Например, если я установил абзац с верхним краем в 20 пикселей и нижним полем в 15 пикселей, у Ill будет всего 20 пикселей пространства между абзацами (два поля разваливаются друг на друга, а наибольшие выигрыши).
Когда использовать прокладку
Вы хотите, чтобы все пространство, созданное вами, было внутри вашей границы. Прокладка находится внутри ваших границ, поэтому ее полезно для того, чтобы оттолкнуть ваши границы от содержимого внутри вашего элемента.
Вам нужно, чтобы ваш цвет фона/изображение продолжался в пространстве, создаваемом вами. Ваш фон будет продолжен за вашим дополнением, поэтому используйте его, только если вы хотите, чтобы ваш фон выглядел.
Вы хотите, чтобы ваше верхнее и нижнее пространство вел себя более жестко. Например, если вы установите абзацы в своем документе, чтобы иметь верхнее заполнение 20 пикселей и нижнее дополнение 15 пикселей, тогда в любое время, когда у вас было два абзаца в строке, на самом деле они имеют в общей сложности 35 пикселей пространства между ними.
Разница расширенного поля и пояснения
Нецелесообразно использовать padding для содержимого пространства в элементе; вы должны использовать margin для дочернего элемента. Старые браузеры, такие как Internet Explorer, неправильно истолковали модель окна, за исключением случаев использования margin , который отлично работает в Internet Explorer 4.
При использовании padding существует два исключения:
Он применяется к встроенному элементу, который не может содержать дочерние элементы, такие как элемент ввода.
Вы компенсируете очень разную ошибку браузера, которую продавец * cough * Mozilla * cough * отказывается исправлять и быть уверенным (в той степени, в какой вы регулярно проводите обмен с редакторами W3C и WHATWG), которые вы должны иметь рабочее решение и это решение не будут влиять на стилирование чего-либо другого, кроме ошибки, которую вы компенсируете.
Когда у вас есть элемент 100% ширины с padding: 50px; , вы получите width: calc(100% + 100px); . Поскольку margin не добавляется в width , это не вызовет неожиданных проблем с макетами, если вы используете margin on child elements вместо padding непосредственно в элементе.
Итак, если вы не делаете одну из этих двух вещей, не добавляйте дополнение к элементу, а к нему следует использовать элемент child/children, чтобы обеспечить ожидаемое поведение во всех браузерах.
Сначала посмотрим, каковы различия и какова каждая ответственность:
1) Маржа
Свойства поля CSS используются для создания пространства вокруг элементов.
Свойства поля задают размер пробела вне поля границы. С CSS вы полностью контролируете поля.
Есть Свойства CSS для задания поля для каждой стороны элемента (вверху, справа, внизу и слева).
2) Прокладка
Свойства прошивки CSS используются для создания пространства вокруг содержимого.
Прокладка очищает область вокруг содержимого (внутри границы) элемент.
С CSS вы имеете полный контроль над дополнением. Там являются свойствами CSS для установки дополнения для каждой стороны элемента (вверху, справа, внизу и слева).
Так просто Поля - это пространство вокруг элементов, а Прокладка - это пространство вокруг содержимого, которое является частью элемента.
Это изображение из codemancers показывает, как границы и границы становятся доступными, а также то, как границы и контент-ящик делают их разными.
