Есть ли способ дать элементу div некоторое дополнение в своей границе? Например, в настоящее время весь текст внутри моего основного элемента div идет прямо к краю границы элемента. Я хотел бы, как правило, на этом сайте иметь не менее 10-20 пикселей пространства между текстом и границей.
Здесь показан снимок экрана, чтобы проиллюстрировать, что у меня есть:
Здесь я вижу много ответов, которые вы вычитаете из ширины div и/или используя размер окна, но все, что вам нужно сделать, это применить прописку дочерних элементов рассматриваемого div. Так, например, если у вас есть такая разметка, как это:
<div id="container">
<p id="text">Find Agents</p>
</div>
Все, что вам нужно сделать, это применить этот CSS:
#text {
padding: 10px;
}
Вот скрипка, показывающая разницу: http://jsfiddle.net/CHCVF/2/
Или, еще лучше, если у вас есть несколько элементов и не хочется давать им все одинаковые классы, вы можете сделать что-то вроде этого:
.container * {
padding: 5px 10px;
}
Который выберет все дочерние элементы и назначит им требуемое дополнение. Вот сценарий этого в действии: http://jsfiddle.net/CHCVF/3/
Свойство CSS, которое вы ищете, - это отступы. Проблема с дополнением состоит в том, что он добавляет ширину исходного элемента, поэтому, если у вас есть div с шириной 300 пикселей и добавьте к нему 10 пикселей от ширины, ширина теперь будет 320 пикселей (10 пикселей слева и 10 пикселей на справа).
Чтобы предотвратить это, вы можете добавить размер окна: border-box; к div, это заставляет его поддерживать указанную ширину, даже если вы добавляете дополнение. Таким образом, ваш CSS будет выглядеть так:
div {
box-sizing: border-box;
padding: 10px;
}
вы можете узнать больше об размеру окна и об использовании браузера в целом:
Просто используйте div { padding: 20px; } и вычитайте 40px из вашей оригинальной ширины div.
Как указал Филипп Уиллс, вы также можете использовать box-sizing вместо вычитания 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-moz-box-sizing предназначен для Firefox.
Заполнение - это способ добавить вид поля внутри Div.
Просто используйте
div { padding-left: 20px; }
И чтобы увеличить размер, вам нужно будет -20px от первоначальной ширины Div.