Открыть меню    

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

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

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

margin-bottom: 20px; height: 200px; background-color: silver;
margin-top:-80px; height: 100px; background-color: gray;

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

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

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus aliquet arcu id dapibus. Morbi. Praesent elementum, velit eu blandit ultrices, sapien odio volutpat nulla, in tempor nisl magna eget arcu.

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;}  
 

div_one
div_two

In turpis diam, volutpat ut mollis ut, imperdiet quis elit. Proin et ligula magna. Pellentesque. Suspendisse potenti. Maecenas tincidunt velit vel quam malesuada pulvinar. Vestibulum non arcu eget risus blandit.

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

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

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

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

div_one
div_two

In turpis diam, volutpat ut mollis ut, imperdiet quis elit. Proin et ligula magna. Pellentesque. Suspendisse potenti. Maecenas tincidunt velit vel quam malesuada pulvinar. Vestibulum non arcu eget risus blandit.

Единица измерения 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. Оставляйте комментарии.

Комментарии к статье