Почему граница влияет на размер содержащего блока в CSS? - PullRequest
Новая
       1

Почему граница влияет на размер содержащего блока в CSS?

4 голосов
/ 30 июня 2010

Я понимаю, что высота поля в CSS - это высота содержимого, исключая поля и отступы, но почему в этом примере, если вы раскомментируете строку border: line в содержащем элементе div, цвет фонаdiv расширяется над первым абзацем, а если у вас нет границы, то нет? 

<html>
<head>
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <title></title>
    <style type="text/css">
        #container {
            background-color: green;
            /* border: black solid 1px; */
        }

        p { background-color: red;
            margin-top:50px;
            margin-bottom: 0px;
            border: black dotted 3px;
          }
    </style>
</head>
<body>
<div id="container">
    <p>first paragraph</p>
    <p>second paragraph</p>
</div>  
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 30 июня 2010

Я понимаю, что высота поля в CSS - это высота содержимого, исключая поля и отступы

Неправильно: оно включает отступы и границы(за исключением Microsoft Internet Explorer из-за ошибки и теперь из соображений совместимости (если используется рендеринг в режиме причуд)).Читайте о блочной модели CSS :

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

, где край содержимого - это край, проходящий вокруг внешней границы.

1 голос
/ 30 июня 2010

@ aizuchi,

Сначала в вашем CSS произошла ошибка. Проверьте «рис» справа от «поля-дно».

Во-вторых, добавьте "overflow: hidden;" в элемент #container, если вы не установили siez родительского элемента, у вас должен быть этот тег, чтобы указать родительскому элементу, какой размер использовать. Это заставит #container использовать высоту дочернего элемента самостоятельно (#container), что, вероятно, является проблемой в вашем CSS, помимо «pic».

В-третьих, ошибка модели Google box в IE6, чтобы понять разницу между нашим "любимым" ie6 и другими браузерами.

Четвертый из всех

лучше использовать 

<LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />

вместо 

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
0 голосов
/ 30 июня 2010

Маржа находится за пределами границы, а отступы - внутри границы, поэтому ваше верхнее поле может привести к тому, что поле будет находиться выше границы.Если вы хотите заполнить отступ между абзацем и рамкой, используйте отступы без полей.Размер div будет определяться полем, отступом и границей.Все они будут способствовать размеру div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...