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

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

Вот снимок экрана, чтобы проиллюстрировать то, что я в настоящее время:

enter image description here

источник

2013-12-10 NealR

добавить прописку к элементам внутри div –

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

источник

2013-12-10 21:11:09

Это то, что я сделал - создал div, называемый 'contentContainer', и дал это дополнение 20px. thx – NealR

@NealR Нет проблем, рад, что вы это поняли –

'.container *' не работает, если в нем есть несколько контейнеров. Все внутренние контейнеры также получат отступы, которые могут быть нежелательными. –

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

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

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

-moz-box-sizing для Firefox.

источник

2013-12-10 20:56:47 Jarno

Можете ли вы добавить jsFiddle тоже? – frenchie

или добавьте размер коробки: рамка-рамка ... (вместо вычитания 40) – philwills

@PhillipВыберете хорошее мышление, я добавил его к своему ответу. – Jarno

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

div { padding-left: 20px; }

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

источник

2013-12-10 21:01:31 GDSeabra

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

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

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

вы можете прочитать больше о прокате проклейки и его общую поддержку браузера здесь:

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

источник

2013-12-10 21:04:20 Joel

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

ответ

Смежные вопросы