Разница между запасом и запасом?

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

Ответ 1

padding - это пространство между содержимым и border, тогда как margin - это пространство за пределами границы. Здесь изображение, которое я нашел из быстрого поиска Google, иллюстрирует эту идею.

enter image description here

Ответ 2

Одна из ключевых вещей, которая отсутствует в ответах здесь:

Верхние/нижние поля сворачиваются.

Итак, если у вас есть 20px margin в нижней части элемента и 30px margin в верхней части следующего элемента, маржа между этими двумя элементами будет 30px, а не 50px. Это не относится к левому/правому краю или дополнению.

Ответ 3

Маржа применяется к элементу снаружи, что влияет на то, как далеко ваш элемент находится вдали от других элементов.


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

Кроме того, использование поля не будет влиять на размеры вашего элемента, тогда как заполнение сделает ваши размеры элементов (установите высоту + заполнение), например, если у вас есть div размером 100x100px с отступом 5 px, ваш div фактически будет 105x105px

Ответ 4

Самое простое сдерживание;  padding - это пробел, заданный внутри границы элемента контейнера, и поле дано вне. Для элемента, который не является контейнером, отступы могут не иметь особого смысла, но маржа defenitly поможет его организовать.

Ответ 5

Перетяжка

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

Margin

Margin - это свойство CSS, которое определяет пространство вне элемента для его следующего внешнего элемента.

Маржа влияет на элементы, которые имеют или не имеют границ. Если элемент имеет границу, маржа определяет пространство от этой границы до следующего внешнего элемента. Если элемент не имеет границы, то поле определяет пространство из содержимого элемента в следующий внешний элемент.

Разница между заполнением и маржировкой

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

Ответ 6

Помните эти 3 точки:

  • Маржа - это дополнительное пространство вокруг элемента управления.
  • Закладка - это дополнительное пространство внутри элемента управления.
  • Заполнение внешнего управления - это поле внутреннего контроля.

Демо-изображение: (где красный флажок - контроль желаний) введите описание изображения здесь

Ответ 7

Заполнение - это пространство внутри границы, тогда как маржа - это пространство за пределами границы.

Ответ 8

margin = пространство вокруг (снаружи) элемента с границы наружу.

padding = пробел вокруг (внутри) элемента от текста до границы.

см. здесь: http://jsfiddle.net/robx/GaMpq/

Ответ 9

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

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

Ответ на другой вопрос по этому вопросу дает пример.

Ответ 10

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

Ответ 11

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

Ответ 12

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

См. пример:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Ответ 13

Замечательно знать разные значения margin и padding. У них есть некоторые отличия:

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

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

Примечание. Я не знаю причины этих различий. Поэтому вы должны спросить об этом у разработчиков (разработчиков) CSS!

См. главный ответ по другому вопросу

Хорошее кодирование!

Ответ 14

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

Маржа предназначена для перемещения элемента вокруг.

Ответ 15

Существует одно важное различие:

Маржа - на внешней стороне элемента, то есть будет применен сдвиг пробела "после" элемента начинается. Заполнение - внутри, другое - пробел "до", начиная с элемента.

Ответ 16

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

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

Кроме того, использование поля не будет влиять на размеры вашего элемента, тогда как заполнение сделает ваши размеры элементов (установите высоту + заполнение), например, если у вас есть div размером 100x100px с отступом 5 px, ваш div фактически будет 105x105px

Ответ 17

Заполнение - это пространство между ближайшими компонентами на веб-странице, а margin - это пробел с поля веб-страницы.

Ответ 18

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

Ответ 19

Заполнение - это пространство между содержимым и границей. Где Margin - это пробел между границей и другим элементом.