CSS, возможно, вы этого не знали

Отрицательные поля (margin)

Если среди сворачиваемых полей (а это, конечно, верхнее - margin-top или нижнее – margin-bottom поля) есть отрицательные значения, то браузер, как правило, выбирает максиму по модулю. Затем этот максимум вычитается от положительного значения. Полученное значение и есть расстояние между элементами. Проиллюстрирую:

Как видите, нижний блок 'залез' на верхний блок на 60px (20px-80px=-60px).

Верхние и нижние поля, отступы (margin, padding)

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

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

Поля и строковые элементы

Верхнее и нижнее поля (margin) не влияют на высоту строки элемента, однако левое и правое поле строкового элемента 'раздвигают' строковый элемент, образуя пространство между строковым элементом и предыдущим (последующим) словом. Например:

CSS выделенного строкового элемента (тег span):

    span {margin:0 20px 30px 40px;}

Как видите, нижнее поле (margin-bottom) 30px не увеличивает высоту строки.

Цвет рамки

В том случае, если цвет у рамки не задан, он будет соответствовать цвету текста элемента.

Горизонтальное форматирование

Как известно, любой блок имеет 7 свойств,

сумма которых должна быть равна ширине (width) элемента родителя.

Вот они: width, padding-left, padding-right, margin-left, margin-right, border-left, border-right. Однако лишь для трех из семи свойств может быть задано значение auto. Это правое поле (margin-right), левое поле (margin-left) и ширина (width).

Line-height

Еще одно странное свойство. Наследует вычисленное значение элемента-родителя, а не элемента-потомка. Например:

     
.div_one {font-size:12px;}       
.div_one .div_two {line-height:1em;} 
.div_one .div_two p {font-size:24px;}  
 

Автор, наверное, подразумевал, что параграф унаследует свойство line-height от родителя (.div_two) и, соответственно, у параграфа line-height будет равен 24px. Однако у родителя line-height уже посчитано и равно 12px (унаследовано от .div_one).

Поэтому лучше всего использовать коэффициент масштабирования. Так как вместо вычисляемого значения будет наследоваться коэффициент масштабирования и для каждого элемента line-height будет определен относительно его собственного свойства font-size.

Например так:

     .div_one .div_two {line-height:1;} 

Единица измерения EM

В CSS em – это значение свойства font-size того элемента, к которому применяется единица измерения em. То есть значение em меняется от элемента к элементу.

Поясню на примере: у нас есть абзац, у которого font-size равен 14px и заголовок второго уровня, чей font-size равен 20px. Если мы зададим верхний отступ для обоих элементов равным 2em, то у абзаца верхний отступ будет равен 28px, а у заголовка 40px.

CSS

       
  p {font-size:14px;}        
  h2 {font-size:20px;} 
  
  p {padding-top:2em;}    /*  28px */     
  h2 {padding-top:2em;}   /*  40px */  
  

При задании размера шрифта em вычисляется относительно шрифта элемента-родителя.

Регулярные выражения для CSS

Регулярное выражение для комментария (одна строка) в CSS:

/* текст комментария */

/\*.*?\*/

Буду рад увидеть ваши собственные наблюдения по «неявной» работе CSS. Оставляйте комментарии.