|
||
|
aranea.ru || Спецификация CSS2 | 8.2. Примеры полей, отступов и границ.
8.2. Примеры полей, отступов и границ.Следующий пример иллюстрирует, как взаимодействуют поля, отступы и границы. Пример HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: black; /* text color is black */
background: gray; /* Content, padding will be gray */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: black;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is longer
to illustrate wrapping.
</UL>
</BODY>
</HTML>
приводит в результате к дереву документа (среди других взаимосвязей) с элементом UL, который имеет два дочерних элемента LI. Первая из ниже следующих диаграмм показывает результат примера. Вторая диаграмма иллюстрирует взаимосвязь между полями, отступом и границами элементов UL, а также тех же областей его дочерних элементов LI.  [D]Обратите внимание:
|
