CSS Padding - Видимо, я что-то пропустил - PullRequest
Новая
       10

CSS Padding - Видимо, я что-то пропустил

2 голосов
/ 02 апреля 2009

Допустим, у меня есть такая разметка: 

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

Представьте, что "контейнер" заполнен сотнями единиц для проверки заполнения.

Теперь я хочу сделать область пустого пространства между краями «контейнера» и его содержимым с левой и правой сторон. Поэтому я добавляю: 

padding-left: 50px;
padding-right: 50px;

Теперь из того, что я (подумал) я понял, это будет означать, что если бы 100 a подходило на линию раньше, то только 80 или около того подошло бы сейчас. Другими словами, «контейнер» будет оставаться такой же ширины, но расти вниз .

Однако я вижу, что размер «контейнера» увеличивается по горизонтали, а не по вертикали.

Как я могу заставить "контейнер" расти вертикально и сохранять одинаковую ширину по горизонтали?

Ответы [ 4 ]

6 голосов
/ 02 апреля 2009

Вам нужно изменить ширину до 800px, а затем добавить отступы. Прокладка аддитивна к ширине. 

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

Модель коробки Предоставлено Can Berk Güder

2 голосов
/ 02 апреля 2009

Что сказал Гарри: если вы используете плагин Chrome или Firebug для Firefox, вы можете щелкнуть правой кнопкой мыши и «проверить элемент» и увидеть визуальное представление о том, как измеряется ваш элемент, действительно помогает в этих ситуациях.

0 голосов
/ 02 апреля 2009

Эффекты добавления отступов или полей к элементу полностью зависят от браузера, в котором вы просматриваете страницу. Заполнение и поля ДОЛЖНЫ быть аддитивными, как говорит Гарри, но это не относится к IE6, поэтому вам нужно будет сделать некоторые исследуйте различия между браузерами и узнайте, как вы можете приспособить их к своим правилам стиля.

Из того, что вы делаете, вы просто хотите, чтобы отступ был применен ко всей странице. Вы можете сделать это, напрямую ссылаясь на body в своем CSS. так что у вас будет - 

body
{
    padding:0 50 0 50;
}
0 голосов
/ 02 апреля 2009

Вы также можете добавить поле к чему-либо внутри div: 

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
...