Как правильно делать внутренний отступ в div или table?

12
[Удален]
20673

Все никак не могу понять: у меня есть div, для которого в стиле прописаны width и heigh по 200 px. Мне нужно в блоке разместить текст с отступом слева.

Когда я прописываю для этого же div в стиле padding-left:10, длина блока, увеличивается на 10px. Т.е. если он был в длину 200px, то стал 210. Приходится в стиле для width, указывать не 200 а 190, чтобы стал нужный размер - 200. В таблицах тоже самое. Если я ставлю отступ, то едет вся верстка соседних ячеек.

Как сделать правильно?

4NT1P0V
На сайте с 31.01.2009
Offline
66
#1

Пользуйся

<div style="margin:0px 0px 0px 10px; ">

текст

</div>

9px 0px 0px 26px

Первое отступ сверху, далее отступ справа, потом отступ снизу, ну и в конце отступ слева.

=)
vadts
На сайте с 08.03.2008
Offline
153
#2

ТС, это так задумано.

Или учитывайте ширину отступа, или заключайте текст ещё в один div и у него прописывайте margin на ширину отступа.

fura.pro, gruzovik.pro, rezume.pro, rezina.pro, prognoz.pro, referat.pro, voditel.pro, zdanie.pro (mailto:vadim@svitonline.com?subject=.pro)
4arger
На сайте с 17.12.2008
Offline
95
#3
ХочуВсеЗнать:
Все никак не могу понять: у меня есть div, для которого в стиле прописаны width и heigh по 200 px. Мне нужно в блоке разместить текст с отступом слева.

Когда я прописываю для этого же div в стиле padding-left:10, длина блока, увеличивается на 10px. Т.е. если он был в длину 200px, то стал 210. Приходится в стиле для width, указывать не 200 а 190, чтобы стал нужный размер - 200. В таблицах тоже самое. Если я ставлю отступ, то едет вся верстка соседних ячеек.

Как сделать правильно?

FF, Opera, Chrome, Safari при фиксированной ширине прибавляют padding, т.е. получаем ширину блока width+padding.

IE этого не делает и если указать ширину блока меньше, то верстка может поплыть в IE.

Вам лучше сделать так:


<div style="width:200px;height:200px;">
<p style="margin:0 0 0 20px;">some text</p>
</div>
iren K
На сайте с 28.12.2008
Offline
222
#4
4arger:

Вам лучше сделать так:

<div style="width:200px;height:200px;">
<p style="margin:0 0 0 20px;">some text</p>
</div>

а можно и просто так

<div style="width:200px;height:200px;margin:0 0 0 20px;">some text
</div>

- но я бы все-таки через css все разрулила..

c уважением Iren
4arger
На сайте с 17.12.2008
Offline
95
#5
iren K:
а можно и просто так
<div style="width:200px;height:200px;margin:0 0 0 20px;">some text
</div>

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

PC писал без css, чтобы код меньше был. конечно, лучше вынести в css.

BPhoenix
На сайте с 12.01.2009
Offline
66
#6

ТС, введите еще один "внутренний" div, для которого отдельно будет определено параметр margin

iren K
На сайте с 28.12.2008
Offline
222
#7
4arger:
так вы задаете отступ дива от других элементов, ТСу нужен отступ внутри дива

согласна,Вы правы..))

[Удален]
#8
4arger:
FF, Opera, Chrome, Safari при фиксированной ширине прибавляют padding, т.е. получаем ширину блока width+padding.
IE этого не делает и если указать ширину блока меньше, то верстка может поплыть в IE.

да-да. так и выходило.

Всем спасибо за ответы, все понял.

W1
На сайте с 22.01.2021
Offline
303
#9
Had #:
Задрало уже

Had, завязывай. Задрало уже...

Мой форум - https://webinfo.guru –Там я всегда на связи
E
На сайте с 01.10.2017
Offline
100
#10
Had #:
Нужен единый стандарт.
Он есть - box-sizing: border-box 😉
Домены на продажу: https://p20.ru/collection/domains-for-sale
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий