это ошибка? поля элемента P выходят за пределы div - PullRequest
Новая
       13

это ошибка? поля элемента P выходят за пределы div

3 голосов
/ 26 марта 2009

Я использую Firefox3 в Ubuntu (И я обнаружил ошибку в SO, пока на этом :-D) Ожидаемое поведение - не видеть какого-либо разрыва между DIV, в то время как поле отображается на основе полей P. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <style>
        p{
            background-color: transparent;
            margin: 10px;
            color: white;
        }
        div{
            background-color: black;
            margin:0;
            width: 300px;
        }
   </style>
</head>
<body>
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
   <div>
        <p>aaaaaaaaaaa</p>
        <p>bbbbbbbbbbb</p>
        <p>ccccccccccc</p>
   </div> 
</body>
</html>

Ответы [ 3 ]

14 голосов
/ 26 марта 2009

Это поведение, как оно определено в блочной модели CSS:

8.3.1 Сжимающиеся поля

В этой спецификации выражение Снижение полей означает, что прилегающие поля (без подкладки или пограничные зоны отделяют их) от двух или больше ящиков (которые могут быть рядом с одним другой или вложенный) объединить в единичное поле.

В CSS2 горизонтальные поля никогда разрушаться.

Вертикальные поля могут упасть между определенные поля:

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

http://www.w3.org/TR/CSS2/box.html

Основанием для этого может быть то, что если вы устанавливаете (вертикальное) поле для чего-либо, вы просто хотите убедиться, что между границей или заполнением этого элемента и границей или заполнением остается хотя бы такое большое пространство следующий элемент (например, два абзаца).

Если вы хотите, чтобы поле содержалось в div (то есть, чтобы div расширялся), вам нужно установить отступ или границу в верхней и нижней части div.

0 голосов
/ 26 марта 2009

Как Симон Леманн написал , это правильное поведение. Похоже, что вы ищете это p{padding:100px;}.

0 голосов
/ 26 марта 2009

Я только что проверил, что с FF в Windows и элементы p содержатся в том виде, в котором они должны быть, а не вне div. На IE7 все выглядит хорошо.

Попробуйте поиграть с границами, установленными на всех элементах, и посмотрите, что именно происходит.

Извините, я не могу помочь.

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

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

...