уроки - css что это




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

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

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


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

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

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


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


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


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


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


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

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


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

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

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


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

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

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


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

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


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


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

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


Хорошо знать о различиях между margin и padding . Насколько я знаю:

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

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


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





css