CSS - свойство margin и float - PullRequest
1 голос
/ 30 апреля 2010
  1. У нас есть div со статическим позиционированием. Внутри у нас есть параграф с полем. Высотой div будет абзац без поля

  2. У нас есть div с плавающей точкой: слева. Внутри у нас есть параграф с полем. Высота div будет равна абзацу плюс его поле.

Чем это объясняется?

Вот HTML-код:

<!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" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="nivel1">
<div id="nivel21">
    <p>Este es el primer parrafo</p>
</div>
<div id="nivel22">
    <p>Este es el primer parrafo</p>
</div>
</div>

</body>

</html>

И код CSS:

body {
    margin:0;
    padding:0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:2em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:2em;
    background-color:#FC0;
}

А вот ссылка на тестовый сайт.

Ответы [ 4 ]

1 голос
/ 15 апреля 2014

После нескольких правок я думаю, что получил ответ:)

Я также испытал это загадочное поведение. Я думаю, что часть объяснения находится в разделе 10.6.7 спецификации CSS2.1 :

В некоторых случаях (см., Например, разделы 10.6.4 и 10.6.6 выше), высота элемента который устанавливает контекст форматирования блока, вычисляется следующим образом:

Если у него есть только дочерние элементы на уровне строки, высота - это расстояние между вершиной верхняя строка строки и нижняя часть самой нижней строки строки.

Если у него есть дочерние элементы уровня блока, высота - это расстояние между верхним краем поля самый верхний дочерний блок уровня блока и нижний край поля самого нижнего блока- ровный дочерний ящик.

Те «определенные случаи», перечисленные в разделе 10.6.6, включают плавающие элементы.

Элемент #nivel21 в вопросе является плавающим элементом и содержит дочерние элементы уровня блока (a <p>), поэтому применяется это правило особого случая, а высота <div> вычисляется с использованием верхние и нижние края поля тега <p>.

Во-вторых, эта страница о сворачивающихся полях может дать представление о том, почему высота #nivel22 не не включает поля тега <p>:

[...] margin-top элемента p фактически становится верхним полем элемента div и выталкивает div вниз на страницу [...]

Тег <p> имеет неявное поле (в моих тестах 10px), которое необходимо свернуть с полем 2em внешнего элемента #nivel1, поэтому по этой причине браузер делает вид, что тег <p> не имеет на полях вообще (вместо этого ставится #nivel22), что означает, что высота #nivel22 уменьшается до высоты строки тега <p>.

Надеюсь, этот ответ имеет смысл для кого-то, кроме меня!

0 голосов
/ 30 апреля 2010

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

<html>
  <head>
    <title>divs</title>
    <style>
      .container{
      float: left;
        background-color: #0F3;
      }
      .column {
        margin: 2em;
        float: left;
        padding: 5px;
      }
      #lefty{
        background-color: #C00;
      }
      #righty{
        background-color: #FC0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="lefty" class="column">
        <p>Column number 1</p>
      </div>
      <div id="righty" class="column">
        <p>Column number 2</p>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 16 октября 2013

Это происходит из-за взаимодействия двух дивов . Удалите плавающий, статический уменьшится. Что происходит, плавающий div выталкивает текст в статическом div вниз, расширяя его.

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

body {
    margin:0;
    padding:0;
}

p {
    margin: 0;
}

#nivel1 {
    border:solid;
    border-color:#333;
    margin:0;
    background-color:#0F3;
    margin:2em; 
}

#nivel21 {
    margin:5em;
    float:left;
    background-color:#C00;

}

#nivel22 {
    margin:5em;
    background-color:#FC0;

}

0 голосов
/ 30 апреля 2010

Я думаю, что когда вы используете свойство float, браузер добавляет отображаемый элемент к плавающему

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