Свойство CSS для ввода текста внутри div

Есть ли способ дать элементу div некоторое дополнение в своей границе? Например, в настоящее время весь текст внутри моего основного элемента div идет прямо к краю границы элемента. Я хотел бы, как правило, на этом сайте иметь не менее 10-20 пикселей пространства между текстом и границей.

Здесь показан снимок экрана, чтобы проиллюстрировать, что у меня есть:

enter image description here

Ответы

Ответ 1

Здесь я вижу много ответов, которые вы вычитаете из ширины 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/

Ответ 2

Свойство CSS, которое вы ищете, - это отступы. Проблема с дополнением состоит в том, что он добавляет ширину исходного элемента, поэтому, если у вас есть div с шириной 300 пикселей и добавьте к нему 10 пикселей от ширины, ширина теперь будет 320 пикселей (10 пикселей слева и 10 пикселей на справа).

Чтобы предотвратить это, вы можете добавить размер окна: border-box; к div, это заставляет его поддерживать указанную ширину, даже если вы добавляете дополнение. Таким образом, ваш CSS будет выглядеть так:

div {
    box-sizing: border-box;
    padding: 10px;
}

вы можете узнать больше об размеру окна и об использовании браузера в целом:

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Ответ 3

Просто используйте div { padding: 20px; } и вычитайте 40px из вашей оригинальной ширины div.

Как указал Филипп Уиллс, вы также можете использовать box-sizing вместо вычитания 40px:

div {
    padding: 20px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

-moz-box-sizing предназначен для Firefox.

Ответ 4

Заполнение - это способ добавить вид поля внутри Div.
Просто используйте

div { padding-left: 20px; }

И чтобы увеличить размер, вам нужно будет -20px от первоначальной ширины Div.