Модель коробки CSS (поля и накладная) для вертикального расстояния между абзацами
https://stackoverflow.com/questions/568561
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как можно использовать CSS «маржа» и «прокладка» для вертикального интерфейса между параграфами:
- Можно ли определить вертикальное пространство между параграфами с использованием заполнения и/или с использованием маржи?
- Если это можно сделать с помощью любого, то какой или более нормальный или более нормальный?
- Вы склонны определять ненулевую прокладку а также ненулевые поля, и если да, то сколько из каждого?
А Пример края, прокладки и границ объясняет теоретически В чем разница между полом и прокладкой: я задаюсь вопросом, сколько каждого из них использовать на практике, чтобы сделать нормальную, красивую страницу.
Во -вторых, учитывая наценку, как следующее ...
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
Если вы хотите равного вертикального пространства между каждым абзацем и/или элементом списка, то:
- Не могли бы вы определить
<ul>как иметь собственное Zero Margin+Padding? - Или будет
<ul>обычно имеет ненулевую маржу, что тогда не будет иметь никакого эффекта, потому что эта маржа будет обрушена с краем<li>внутри и<p>Что предшествует?
В -третьих (и я не уверен, должен ли я задать этот третий вопрос), Спецификация для разрушения поля Говорит: «Если примыкают верхнюю и нижнюю краю коробки, то поля может рухнуть через нее». Если у меня есть пустой абзац, как следующий посередине ...
<p>Hello</p>
<p></p>
<p>World</p>
... тогда я ожидаю увидеть это как пустой абзац, т.е. с дополнительным количеством вертикального пространства между Hello и World:
- Что предотвратит разрушение маржи этого пустого абзаца, и, следовательно, пустой абзац невидим: это ненулевая накладка, что делает это?
- В каком сценарии является Это полезно для коробки, чтобы иметь прилегающую верхнюю и нижнюю маржу, которая обрушится?
Ответы на любой или все эти три вопроса будут приветствовать.
На данный момент меня не особенно интересует проблемы с моделью модели IE: вместо этого я хочу знать о том, как использовать стандарт.
Решение
Чтобы ответить на ваш первый вопрос, обычно не имеет значения, если вы используете маржу или накладку для добавления расстояния между элементами, однако, если вы применяете границу к элементу и используете прокладку, чтобы сделать пространство, оно вытащит границу так далеко.
Чтобы ответить вам на второй выпуск, просто посмотрите на этот код и, возможно, поиграйте с ним:
<html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>
Имейте в виду, что в примере, прежде всего, оставшееся пространство связано со свойствами шрифта, которые могут быть изменены с использованием тех же методов, что и любой другой элемент.
И третьему:
Я думаю, что «Гарроу» прав в пустом <p>Я не сталкиваюсь с этой проблемой, которая часто использую <p> Однако все меньше и меньше эта статья выглядел очень интересно, и я думаю, что предлагает лучшее объяснение, чем W3C.
Другие советы
Чтобы ответить на ваш 3 -й вопрос;
Второй <p> в виде пустого элемента уровня блока просто не будет отображаться.
Вы можете заставить элемент быть отображенным, когда он пуст, давая ему высоту или прокладку, или включив неразрывное пространство Внутри пара. (Вероятно, есть больше способов сделать это).
Нормальный пробел (например, новички, вкладки или пространства), похоже, не работают в этом отношении.
Редактировать № 2 :: должным образом проиллюстрировать, как все это работает, сохраните это локально и посмотрите, что рендерирует.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style type="text/css" media="screen">
p { margin:10px; background-color:#ccc;}
p.padding { padding:5px; background-color:#eec; }
p.height { height:30px; background-color:#cee; }
</style>
</head>
<body>
<p>text</p>
<p class="padding">i have padding</p>
<p class="padding"></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>5 empty paragraphs before this, only one will render. (it has padding)</p>
<p>& nbsp;</p>
<p> </p>
<p> </p>
<p>
</p>
<p>3 whitespace before me, one will render, it has &nbsp;</p>
<p class="height">im 30 px high</p>
<p class="height"></p>
<p></p>
<p></p>
<p>3 empty before me, 1 will show (it has height)</p>
<p>text</p>
<p>text</p>
</body>
</html>
Хе -хе, ну ... веб -браузеры разные, я бы сказал, что то, что хорошо сочетается с Firefox, обычно хорошо сочетается со стандартом, но это тоже не совсем правда.
Согласно только xhtml1-strict.dtdu003Cli/> может быть ребенкомu003Cul/> Анкет Я предлагаю вам получить себе дизайнера, который знает о стандартах. Это формальные спецификации, с которыми вы можете проверить свой HTML.
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p> <!--illegal here-->
</li>
</ul>
Но вернемся к вашему вопросу (кстати, это боль, чтобы ответить). Есть много случаев, когда вы определили бы ненулевую маржу и прокладку. Я склонен предпочитаю дополнительную маржу, когда накладка не нужна, а затем накладывается, когда маржа не работает. Каждая ситуация отличается, и вам нужно знать, когда кто -то предпочтительнее.
Я не буду вдаваться в подробности, потому что я думаю, что вы здесь на правильном пути. Продолжайте экспериментировать, и я знаю, что вы получите это. Но имейте в виду, что веб -браузеры делают вещи по -другому.
Я не уверен, что эта рухная маржа, но белое пространство иногда считается краем. Если между ними есть куча элементов без белого пространства, это иногда отличается от того, где нет белого пространства.
Опять же, это многое, чтобы принять участие, поэтому я не буду вдаваться в подробности, но вам нужно знать об этих вещах, и вы получите эти знания, практикуя.
Абпарат и поля списков по умолчанию - это не те же браузеры, когда вы начнете выполнять весь этот макет, вы захотите определить набор базовых правил CSS для вашей страницы. И если вам нужна помощь в том, на каких маржах я предлагаю вам взглянуть на Каноны строительства страниц.
p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }
Приведенные выше правила являются лишь примером, но они делают то, что они гарантируют, что верхняя и нижняя маржа для абзацев и элементов списка одинакова, несмотря на браузер. Подобные дела заставляют вашу страницу выглядеть одинаковые браузеры.
Продолжайте проверять вещи и читайте отличные блоги CSS. Попросите о помощи, когда вы столкнетесь с действительно неясными краями. Эти люди потратили много времени, пытаясь решить, и ваше время лучше потратить на изучение того, как они это сделали, чем переосмысление колеса.
Главное, что вам нужно знать, это то, что прилегающая (вертикальная) поля, так что, если у вас есть:
p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>
Пространство между ними будет 1ем, а не 2 EM.
Заполнение отдельно. Если бы у абзацев были заполнения, это было бы внутри их коробок. Источником истины для всех этих вещей является стандарт W3C CSS. Например, разрушающиеся поля:
В этой спецификации выражение разрушающиеся поля означает, что прилегающие края (без прокладки или пограничных областей отделяют их) из двух или более ящиков (которые могут быть рядом друг с другом или вложенные) объединяются, чтобы сформировать единый край.
В CSS2 горизонтальная маржа никогда не разрушается.
Вертикальная маржа может разрушить определенные коробки:
- Два или более прилегающих вертикальных краев блочных коробок в нормальном коллапсе потока. Полученная ширина маржи - максимум прилегающей ширины края. В случае негативной маржи абсолютный максимум отрицательной смежной края вычитается из максимума положительных смежных полей. Если положительных поля нет, абсолютный максимум отрицательной прилегающей края вычитается из нуля.
- Вертикальная маржа между плавающей коробкой и любой другой коробкой не разрушается.
- Маржи абсолютно и относительно расположенных коробок не разрушаются.
Пожалуйста, проконсультируйтесь с примерами маржи, прокладки и границ для иллюстрации рухнутых полей.
Границы немного разные, особенно в столы где они могут рухнуть друг в друга или не в зависимости от CSS.
Теперь история, конечно, не заканчивается. Браузеры могут варьироваться в зависимости от того, как они рассчитывают комбинации ширины, краев, границ и прокладки, но это в значительной степени уменьшается, заставляя браузеры в режим стандартов (с документом) и большой темы сами по себе (как и то, что вы делаете, чтобы минимизировать подобные проблемы).
