Отступы по умолчанию
Неопытный верстальщик может удивиться, увидев, что веб-страница начинается не с начала экрана. Например, задав какому-либо тегу внутри страницы фон и заметив, что фон начинается не с начала экрана. Дело в том, что для тега body по умолчанию заданы отступы. Сделано это для того, чтобы текст, написанный на веб-странице, по умолчанию не прижимался к краю экрана.
Если нужно избавиться от этих отступов,
достаточно в CSS изменить отступы на ноль
для body.
Свойства: тип тега
Рассмотрим свойства, влияющие на тип тега и само его существование.
display
Свойство display позволяет изменить тип любого тега либо вообще удалить его со страницы. С его помощью строчный тег можно сделать блочным и наоборот.
Значение inline преобразует блочный тег в строчный.
Например:
Значение block преобразует строчный тег в блочный.
Значение inline-block
Очень полезно значение, позволяющее создать тег строчного типа, который поддерживает отдельные возможности блочных тегов.
В частности, тегам данного типа можно задавать ширину и высоту, тогда как к обычным строчным тегам свойства width и height неприменимы.
Кроме того, при рассмотрении свойств padding и margin, мы подчеркивали, что для строчных тегов, расположенных в блоке текста, отступы сверху и снизу игнорируются. Эта особенность не затрагивает тегов, для которых задано значение inline-block.
Значение list_item
Преобразует тег в элемент списка – в тег li, т.е. в блочный тег с маркером слева от содержимого.
Значение none
Полностью удаляет тег с веб-страницы. В любой момент с помощью JavaScript тег можно отобразить.
Свойство visibility
Свойство visibility по своему действию напоминает значение свойства display. Оно также позволяет при необходимости скрыть содержимое тега. Однако у свойства visibility есть существенное отличие – оно скрывает содержимое тега, но сам тег со страницы не удаляется, т.е. место, которое занимает тег, по-прежнему остается зарезервированным за скрытым тегом.
Можно сказать, что свойство visibility позволяет тег полностью сделать прозрачным. Рассмотрим сказанное на примере:
Для того чтобы отобразить снова тег, значение свойства нужно изменить на visible.
Свойства: границы
border
Любой тег состоит из внешнего (margin) и внутреннего (padding) отступов, а также границы.
Граница тега находится между внешним и внутренним отступами. Она задается свойством border, в значении которого через пробел указывается толщина границы, ее стиль и цвет. Например:
border: 1px solid #fff;
Важно учитывать, что толщина границы не входит в состав высоты и ширины тега, т.е. при определении реальной ширины и высоты тега нужно учитывать и размер заданной ему границы.
Стиль отображения границы может принимать значения:
none – скрыть границу;
inherit – наследовать значение свойства родителя;
solid – граница в виде сплошной линии;
dotted – граница из точек;
dashed – граница из пунктирной линии;
double – граница в виде двойной сплошной линии.
Помимо значений в виде цвета, для границы можно использовать следующие значения:
transparent – прозрачный цвет границы;
inherit.
outline
Как и border, свойство outline позволяет задать границу вокруг тега. Синтаксис аналогичный:
outline: толщина стиль цвет
Свойство outline отличается от border тем, что граница, заданная свойством outline, никак не влияет на размеры тега и его положение на странице.
Рассмотрим примеры:
В этом примере теги без свойств border и outline. Обе тега имеют одинаковую ширину и высоту.
Скриншот, показанный выше, соответствует таблице стилей, когда было применено свойство outline. В результате использования данного свойства :
реальная ширина и высота тега не изменились;
тег находится на том же месте, на котором располагался без указания свойства outline;
граница тега нарисована за пределами самого тега; причем граница может выходить за границу экрана или перекрываться рядом расположенными тегами.
Следующий снимок экрана показывает эффект от применения свойства border.
В результате использования данного свойства :
реальная ширина и высота тега увеличились на размер границы, из-за чего рядом расположенные теги сместились;
тег смещен относительно своего прежнего положения на размер границы.
На следующем примере одному тегу присвоено свойство border, а другому – outline. Граница, которая задана свойством outline, зашла на границу, определенную свойством border.
Обводка активной ссылки в Firefox
Свойство outline применяется очень редко, но в браузере Mozilla Firefox обводка используется по умолчанию для выделения активных в данный момент ссылок, а также элементов страницы, на которых в данный момент установлен фокус. Иногда такая особенность существенно портит дизайн (особенно если ссылка или кнопка представляют собой изображение). Для того чтобы избавиться от обводки достаточно обнулить значение свойства outline:
outline: none;