|Web Учебник | Самоучитель по HTML |Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Высота и вертикальное выравнивание содержимого строк.

При помощи каскадных таблиц стилей можно управлять размером строк и расположением в инлай-боксах не зависимо от содержимого, посмотрим еще раз на эту картинку:
Пример правил  line-height
На размер шрифта(font-size) мы обращать внимания пока не будем, а поговорим о том как задать высоту строки. Это делается при помощи свойства line-height, если это свойство не задано явно, то браузер должен вычислить сам значение этого свойства({line-height:inherit;}) относительно размера шрифта, приблизительно font-size+20%.

Значения которые может задать пользователь:
1){line-height:normal;} - это значение анологично {line-height:inherit;}, браузер должен вычислить значение относительно шрифта;
2){line-height:14px;} - это значение задается числами(пикселями, пиками, дюймами и т.д.), и они не зависят от размера шрифта.
3){line-height:1.3em;} - эти значения задаются в em или ex и вычисляются относительно шрифта.
4){line-height:125%;} - это значение так-же вычисляется относительно шрифта, но в процентах.
Вычесленые значения не наследуются. Так-же не может иметь отрицательное значение.
Внимание!!!, дальше мы будем управлять шрифтами, но если будете менять размер шрифта, то не забывайте изметять и высоту строки, т.к. если этого не сделать то строки склеятся, т.е. одна строка налезет на другую. Другими словами размер шрифта должен быть хоть на 1-2пикселя меньше высоты строки.

При помощи CSS можно не только увеличивать размер строки, но и управлять содержимым относительно этого пространства.
Начиная с HTML-4 есть устаревшими теги: U, SUP, SUB, SMALL и не рекомендованных к использованию, в каскадных таблицах стилей есть альтернатива этим тегам и даже намного больше, это свойство vertical-align(вертикальное выравнивание относительно строки).
1) vertical-align:baseline - это значение по умолчанию, его задавать не обязательно, кроме тех случаев если вам нужно вернуть умолчания.
2) vertical-align:sub аналог HTML-тега SUB, т.е. опускает содержимое под базовую линию
3) vertical-align:super аналог HTML-тега SUP, т.е. возвышает содержимое.
4) vertical-align:top если посмотреть на картинку выше то можно представить что черточки под строками и есть базвыми линиями, так вот при этом значении базовая линия не снизу а сверху.
5) vertical-align:text-top тоже самое, но распространяется только на текст.
6) vertical-align:middle опускает содержимое блока приблизительно на 50% размера шрифта.
7) vertical-align:bottom Выравнивается низ бокса с низом строкового бокса
8) vertical-align:text-bottom тоже сомое, но распространяется только на текст.
9) vertical-align:percentage задается в процентах, отрицательное значение понижает содержимое блока относительно родителя, а положительное позвышает.
10) vertical-align:length аналогично предыдущему, за исключением того что значения задаются в пикселях или других единицах измерения.
11) vertical-align:inherit браузер сам должен вычислить это значение.

Завершить эту страницу хотел-бы следующим, свойство vertical-align выполняется только в том случае если ему предшествует какой либо блок(явный или анонимный), потому что все эти "сдвиги" происходят относительно предшественика и если он отсуствует, то ни каких эффектов достигнуть не получится.

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!