Заполнение CSS - Видимо, я что-то пропустил

StackOverflow https://stackoverflow.com/questions/708855

  •  22-08-2019
  •  | 
  •  

Вопрос

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

<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 или около того.Другими словами, "контейнер" останется той же ширины, но увеличится вниз.

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

body
{
    padding:0 50 0 50;
}

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

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top