Разница между полем и отступом? - PullRequest
Новая
       16

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

327 голосов
/ 11 мая 2011

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

Ответы [ 19 ]

4 голосов
/ 11 мая 2011

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

2 голосов
/ 27 июля 2014

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

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

0 голосов
/ 28 июля 2015

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

0 голосов
/ 16 июля 2014

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

0 голосов
/ 15 января 2014

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

0 голосов
/ 28 февраля 2013

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

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

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

0 голосов
/ 11 мая 2011

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

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

0 голосов
/ 11 мая 2011

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...