![[Nevor.ru]](../images/logo.jpg){kind=logo}
| |||||||||||||||||||
| |||||||||||||||||||
О рамках и отступах.При верстке сайта очень важно рассчитать все расстояния между элементами и их ширину, зависимости величин при построении, влияние их друг на друга, позиционирование. Важно, потому что если неверно рассчитать параметры, сайт может "поползти". Опыт подобных расчетов пригодится и при создании "резинового дизайна". Первое, о чем я упомяну - это рамки (border). Вроде бы ничего особенного, однако нужно учитывать специфику их построения, а строятся рамки следующим образом.  построение рамок Это код примера, представленного на рисунке:
<HEAD><STYLE>
TABLE,TD {border-spacing: 0px;
padding:0px;margin:0px}
TD.border {border: outset 20px red}
TD.nol {width: 30px; height: 100px;
text-align: center; background-color: Bisque}
TD.odin {width: 180px; text-align: center}
TD.dva {width: 100px; text-align: center;
background-color: Bisque}
</STYLE></HEAD>
<BODY><TABLE><TR>
<TD class="nol">30</TD>
<TD class="border odin">180</TD>
<TD class="dva">100</TD>
</TR></TABLE></BODY>
Как видно из кода, все расстояния, заданы явно, кроме ширины таблицы. Ширина таблицы (как и высота) должна быть равна сумме расстояний ее ячеек, то есть 30+180+100=310px - ширина и 100px - высота . Высота равна 100px, а вот ширина составляет 350px. Ширина боковых рамок, в отличие от верхней и нижней, при построении не учитывается, поэтому они влияют на габариты общего каркаса. Если указать фиксированную ширину таблицы в 310px, рамки повлияют на ячейку "180", сузив ее, а также на все ячейки, находящиеся справа (в данном случае ячейку "100"), уменьшив их суммарную ширину на 40px (толщина боковых рамок). Вслед за рамками идут отступы. В HTML есть два: "cellspacing" и "cellpadding" - внешний и внутренний отступы соответственно. В CSS2 для их замены существует свойство "border-spacing", однако оно до сих пор не распознается всеми любимым и обожаемым Internet Explorer. Поэтому я по сей день применяю устаревший атрибут "cellspacing", иначе в этом обозревателе все ячейки таблицы разъезжаются на 1мм. Свойства отступов в CSS - "margin" и "padding" (внешний и внутренний отступы соответственно).  отступы Если вы используете внешний отступ, учитывайте его ширину при расчетах ширины и высоты табличных (блочных) конструкций. Приоритет при построении конструкций обозревателем распределяется слева направо, то есть левая ячейка имеет самый высокий приоритет. Также не стоит забывать о том, что при построении сначала учитывается ячейка, ширина которой заданна в пикселях и только потом строится ячейка с шириной, указанной в процентах. Вопросы можете отправлять на почту с пометкой в теме "nevor_mail". |
|||||||||||||||||||
![[наверх]](../images/row.gif)