Что я должен учитывать при использовании полей и отступов для элементов пространства? - PullRequest
Новая
       27

Что я должен учитывать при использовании полей и отступов для элементов пространства?

1 голос
/ 11 июля 2011

Мне было поручено изменить макет сайта таким образом, чтобы он соответствовал критериям руководства по корпоративному стилю клиента.

В руководстве требуется, чтобы некоторые элементы были удалены [X] px от другихэлементы, и что элементы этого типа выровнены с элементами этого типа.

Так что, пока я делаю это, я вижу, что существующие расстояния в некоторых случаях определяются с использованием padding,другие случаи использования margin.

Есть ли предпочтительный способ сделать это?Когда я должен использовать один в пользу другого?

Ответы [ 3 ]

2 голосов
/ 11 июля 2011

В терминах непрофессионала.

Если у вас есть два элемента div рядом друг с другом, пространство между ними называется полем.

Если текст внутри элемента div,пробел между краем элемента div (сверху, справа, снизу, слева) и текстом называется отступом.

1 голос
/ 11 июля 2011

Это действительно как-то зависит. Маржа и Паддинг - две разные вещи. Однако в некоторых случаях вы не заметите разницу.

цифра, показывающая разницу:

enter image description here

Источник: http://www.edition -w3c.de / TR / 1998 / REC-CSS2-19980512 / bilder / boxdim.gif

Так, например: если вы хотите определить пространство между границей и вашим контентом, вы добьетесь этого только с отступом (при наличии видимой границы).

0 голосов
/ 11 июля 2011

Разницу лучше всего объяснить визуально.

Попробуйте это: 

<html>
<head>
  <style>
    body { background-color: #E342FF; margin: 0; padding: 0; }
    #mydiv { border: 2px solid #000000; width: 50%; height: 20%; margin: 50px 0 0 50px; }
    #mydiv2 { border: 2px solid #000000; width: 50%; height: 20%; padding: 50px 0 0 50px; }  
</style>
</head>
<body>
<div id="mydiv">
</div>
<div id="mydiv2">
</div>
</body>
</html>

Вы должны увидеть, что поле просто перемещает div, а отступ фактически увеличивает его.

...