Блог о математике, программировании, алгоритмах. И немного о работе операционной системы Linux.

вторник, 18 октября 2011 г.

CSS, HTML, vertical-align и все точки над i.

HTML-верстка окутана туманом путаницы и тайны. Мне очень долго не давал покоя вопрос: «Почему, в некоторых случаях выравнивание по вертикали работает, а в некоторых нет». Начнем с того, что выравнивание по вертикали можно задать двумя способами. Указав атрибут элемента valign элемента, которому вы задаете выравнивание, или указать свойство CSS vertical-align. Оба этих параметра могут принимать значения 'baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit'. Не буду вдаваться в подробности относительно каждого из них, тут все итак понятно. Важнее то, что выравнивание по высоте работает не всегда. В качестве разъяснения привожу перевод одной коротенькой статейки. HTML элементы бывают блочными (block) и строчными (inline). Блочные элементы характеризуются тем, что:
  • Они всегда переносятся на новую строку.
  • У них можно задать высоту, высоту линии, а также верхнюю и нижнюю границы.
  • Ширина равна 100% ширины родительского элемента, если не задана отдельно.
Примерами блочных элементов могут служить <div>, <p>, <h1>, <form>, <ul> и <li>. Строчные элементы, с другой стороны, являются противоположностью блочным:
  • Они начинаются на той же строке. 
  • У них невозможно задать высоту, высоту строки, а также верхнюю и нижнюю границы.
  • Ширина равна ширине текста/картинки и не может быть изменена.
Примерами строчных элементов могут являться <span>, <a>, <label>, <input>, <img>, <strong> и <em>. Для того, чтобы сменить тип элемента, вы можете использовать CSS-свойство display: inline или display: block. Но какой смысл делать блочный элемент строчным или наоборот? Ну, поначалу сложно представить, зачем использовать этот прием, но на самом деле это очень мощная техника, которая может быть использована когда вы хотите:
  • Заставить строчный элемент начинаться с новой строки.
  • Заставить блочный элемент оставаться на той же строке.
  • Менять ширину строчных элементов (иногда полезно для навигационных ссылок).
  • Менять высоту строчных элементов.
  • Установить фоновый цвет на всю ширину текста для блочных элементов, не без необходимости задавать ширину.

Комментариев нет:

Отправить комментарий