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

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

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

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

Верхние / нижние поля являются складными.

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

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

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

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

Запомните эти 3 пункта:

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

Демо-изображение: (где красная коробка - это контроль над желанием)

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

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

набивка

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

Прибыль

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

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

Разница между отступами и маржой

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

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

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

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

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

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

смотрите здесь: http://jsfiddle.net/robx/GaMpq/

Полезно знать о различиях между marginи padding. Как я знаю:

• Margin - это внешнее пространство элемента, а padding - это внутреннее пространство элемента. Другими словами, margin - это пространство за пределами границы элемента, а padding - это пространство внутри его границы.
• Вы можете установить autoзначение для маржи. Тем не менее, это не допускается для заполнения. Смотрите это .
  Примечание. Используйте margin: autoдля центрирования элемента блока внутри его родительского элемента по горизонтали. Кроме того, можно центрировать элемент внутри flexbox по вертикали, по горизонтали или по обоим, установив для поля значение auto. Смотрите это .
• Поля могут быть любым числом с плавающей точкой, но отступ не должен быть отрицательным.
• Когда вы стилизуете элемент, стиль также будет стилизован; но не маржа. Маржа получает стиль родительского элемента. Например, если вы установите background-colorсвойство черным, его внутреннее пространство (т.е. заполнение) будет черным, но не его внешнее пространство (то есть поле).

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

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

Заполнение позволяет разработчику поддерживать пространство между текстом и включающим его элементом. Margin - это пространство, которое элемент поддерживает с другим элементом родительского 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>

Margin - это свойство в CSS, которое используется для создания пробелов вокруг элементов вне границы. Программист может установить поля сверху, справа, снизу и слева. Другими словами, он может установить эти значения, используя margin-top, margin-right, margin-bottom и margin-left.

Значения Margin могут быть следующих типов.

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

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

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

Длина описывает заполнение в px, pt или cm, в то время как% обозначает заполнение в процентах относительно ширины содержащего элемента. Наконец, наследование описывает, что отступы должны наследоваться от родительского элемента.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Разница между маржей и отступами

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

Значения Кроме того, значения поля могут быть автоматически, длина,% или наследовать, в то время как значения заполнения могут быть длина,% или наследовать тип. Следовательно, это еще одно различие между полем и отступом.

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

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

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

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

Есть одно важное отличие:

Margin - находится снаружи элемента, т.е. применяется сдвиг пробела «после» начала элемента. Padding - находится внутри, другой применяет пробел "до" начала элемента.

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

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

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

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

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

Отступы - это пространство между содержимым и границей. Где , как Маржа это пространство между на границе , а другой элемент.