belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# §3. Установка размеров, границ, отступов и полей элементов

3.1. Определение размеров элементов. Высоту и ширину элементов можно задать при помощи ненаследуемых свойств height и width, которые в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Кроме того, свойства принимают значение auto, которое используется браузером по умолчанию и сообщает ему о том, что высоту и ширину элемента нужно устанавливать автоматически таким образом, чтобы в нем поместилось все его содержимое. Применение этих свойств к строчным элементам не будет иметь эффекта. Также не будет иметь эффекта установка ширины для строк таблицы и высоты для колонок таблицы.

По умолчанию, говоря о высоте и ширине, имеются в виду размеры области содержимого элемента, которые не включают в себя внутренние отступы и границы элемента (см. рис. 3.1). Если же требуется, чтобы браузер, имея дело со свойствами height и width, интерпретировал их значения по другому, необходимо использовать свойство box-sizing, которое может принимать следующие значения:

- content-box – используемое по умолчанию значение, браузер не принимает во внимание внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину контента элемента;
- padding-box – браузер учитывает внутренние отступы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину контента элемента и его внутренних отступов, но границы при этом не считаются;
- border-box – браузер учитывает внутренние отступы и границы элемента при расчете его высоты и ширины, в результате свойства height и width задают высоту и ширину самого элемента.

Рис 3.1. Общая схема элемента

Также имеются возможности для указания минимально и максимально допустимых значений высоты и ширины. Для этого предназначены ненаследуемые свойства min-height и min-width, max-height и max-width (см. пример 3.2). Если высота (ширина) элемента будет меньше, чем значение свойства min-height (min-width), то браузер отдаст приоритет значению свойства min-height (min-width). Аналогично, если высота (ширина) элемента будет больше, чем значение свойства max-height (max-width), то браузер отдаст приоритет значению свойства max-height (max-width).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Размеры элементов</title>
    	<style>
    		.size_1{
    		background-color: yellow;
    		width: 250px;
    		height: 15vh;
    		}

    		.size_2{
    		background-color: violet;
    		min-width: 350px;
    		max-height: 400px;
    		width: 250px;
    		height: 150px;
    		}
    	</style>
    </head>
    <body>
    	<p class="size_1">
    		Ширина абзаца равна 250px, высота &ndash; 15%
    		<br>от высоты области просмотра окна браузера.
    	</p>

    	<p class="size_2">
    		Ширина абзаца будет 350px, т.к. width меньше min-width,
    		<br>а высота &ndash; 150px, т.к height меньше max-height.
    	</p>
    </body>
    </html>

Пример 3.2. Установка размеров элементов

В конце пункта отметим, что свойства min-height, min-width, max-height и max-width в качестве значений принимают все доступные в CSS единицы измерения длины, а также проценты. Но, в отличие от свойств определения высоты и ширины, они не принимают значение auto.

3.2. Установка границ элементов. Для установки границ элементов CSS предоставляет целый набор свойств, позволяющих задать стиль, толщину и цвет границ как по отдельности для каждой из сторон элемента, так и для всех сторон одновременно. Свойств достаточно много, но описывать их все по отдельности мы не будем, т.к. они очень похожи по своему назначению и легко разбиваются на группы.

Для установки стиля границ используются следующие ненаследуемые свойства border-style, border-top-style, border-bottom-style, border-left-style, border-right-style (см. пример 3.3). Все они могут принимать ряд значений, которые определяют внешний вид границы:

- none – граница не отображается, браузер обнуляет ее толщину (значение используется по умолчанию);
- hidden – в принципе тоже самое, что и none, за исключением того, что в случае применения данного значения к границам ячеек таблицы, у которой значение свойства border-collapse установлено как collapse, граница вокруг ячейки не будет отображаться вообще, включая и совмещенные границы смежных ячеек;
- dotted – линия границы будет иметь точечный вид;
- dashed – линия границы будет иметь пунктирный вид;
- solid – линия границы будет сплошной;
- double – линия границы будет двойной;
- groove – линия границы будет иметь объемный рифленый вид с эффектом вдавленности;
- ridge – линия границы будет иметь объемный рифленый вид с эффектом выпуклости;
- inset – линия границы будет иметь объемный вид с эффектом вдавленности;
- outset – линия границы будет иметь объемный вид с эффектом выпуклости.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка границ элементов</title>
    	<style>
    		.b_s{
    		border-color: red;
    		border-width: 5px;
    		}
    	</style>
    </head>
    <body>
    	<span style="border-style: dotted" class="b_s">dotted</span>&nbsp;
    	<span style="border-style: dashed" class="b_s">dashed</span>&nbsp;
    	<span style="border-style: solid" class="b_s">solid;</span>&nbsp;
    	<span style="border-style: double" class="b_s">double</span>&nbsp;
    	<br><br>
    	<span style="border-style: groove" class="b_s">groove</span>&nbsp;
    	<span style="border-style: ridge" class="b_s">ridge</span>&nbsp;
    	<span style="border-style: inset" class="b_s">inset</span>&nbsp;
    	<span style="border-style: outset" class="b_s">outset</span>&nbsp;
    </body>
    </html>

Пример 3.3. Определение внешнего вида границ элементов (пример №1)

Следует отметить, что свойство border-style может принимать через пробел два, три или даже четыре значения (см. пример 3.4):

- одно значение – стиль задается для всех четырех сторон элемента;
- два значения – первое значение задает стиль верхней и нижней границы элемента, второе – правой и левой;
- три значения – первое значение задает стиль верхней границы элемента, второе – правой и левой, третье – нижней границы элемента;
- четыре значения – границы устанавливаются по часовой стрелке: верхняя, правая, нижняя и левая.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка границ элементов</title>
    	<style>
    		.b_s{
    		border-color: blue;
    		border-width: 5px;
    		}
    	</style>
    </head>
    <body>
    	<span style="border-style: dotted outset" class="b_s">
    		dotted outset
    	</span> &nbsp;

    	<span style="border-style: dashed solid double" class="b_s">
    		dashed solid double
    	</span> &nbsp;

    	<span style="border-style: dashed solid dotted double" class="b_s">
    		dashed solid dotted double
    	</span><br><br>

    	<span style="border-bottom-style: double" class="b_s">
    		double
    	</span>
    </body>
    </html>

Пример 3.4. Определение внешнего вида границ элементов (пример №2)

Если нет необходимости задавать сразу все четыре границы элемента или нужно установить (изменить) стиль границы одной отдельной стороны, следует воспользоваться одним из свойств border-top-style, border-bottom-style, border-left-style или border-right-style (см. пример 3.4).

Для установки ширины границ используются похожие ненаследуемые свойства border-width, border-top-width, border-bottom-width, border-left-width, border-right-width (см. пример 3.5). Все они могут принимать ряд значений, которые определяют ширину границы:

- ширина – принимаются любые единицы измерения, используемые в CSS;
- thin – устанавливает тонкую ширину границы;
- medium – устанавливает среднюю ширину границы;
- thick – устанавливает толстую ширину границы.

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

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка границ элементов</title>
    	<style>
    		.b_s_1{
    		width: 300px;
    		border-style: solid;
    		border-color: #0000ff;
    		border-bottom-width: 8px;
    		}
    		.b_s_2{
    		width: 300px;
    		border-style: solid;
    		border-right-color: violet;
    		border-left-width: 8px;
    		}
    	</style>
    </head>
    <body>
    	<p  class="b_s_1">
    		Ширина нижней границы равна 8px, а ширина остальных<br>
    		устанавливается браузером по умолчанию.
    	</p>
    	<p class="b_s_2">
    		Граница правой стороны имеет фиолетовый цвет, остальные<br>
    		имеют цвет, устанавливаемый браузером по умолчанию.
    	</p>
    	<p style="border-bottom: double red 2px; width: 300px;">
    		Заданы характеристики нижней границы.
    	</p>
    </body>
    </html>

Пример 3.5. Определение внешнего вида границ элементов (пример №3)

Для установки цвета границ используются ненаследуемые свойства border-color, border-top-color, border-bottom-color, border-left-color, border-right-color (см. пример 3.5). Все они принимают в качестве значений цвет либо специальное значение transparent, делающее рамку прозрачной (бесцветной), при этом сама граница остается, влияя на размеры элемента. Свойство border-color, кроме того, может принимать через пробел два, три или даже четыре значения, которые задают цвет границ по описанному выше алгоритму (смотреть).

Имеется возможность задать все характеристики границы элемента одновременно при помощи универсальных ненаследуемых свойств border, border-top, border-bottom, border-left, border-right (см. пример 3.5). Стиль, ширину и цвет при этом нужно указывать через пробел, но в любом порядке.

Внешний вид границ элементов можно также изменять за счет величины скругления углов границ элементов. Делается это за счет использования ненаследуемых ствойств border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Все они принимают в качестве радиуса значения в любых доступных в CSS единицах измерения, а также процентах, отсчет которых производится относительно ширины блока. Также можно через слэш '/' задавать сразу два радиуса, если подразумевается сгругление по эллипсу (см. рис. 3.6 и пример 3.7). Свойства срабатывают и при отсутствии границ, в этом случае происходит скругление фона элемента.

Рис. 3.6. Схема скругления углов рамки элемента

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка границ элементов</title>
    	<style>
    		.b_s_1{
    		width: 250px;
    		border-style: solid;
    		border-color: #ff0000;
    		border-radius: 10em 0.5em/1em;
    		}
    		.b_s_2{
    		width: 250px;
    		border-style: solid;
    		border-color: violet;
    		border-bottom-left-radius: 8px;
    		border-bottom-right-radius: 30%;
    		}
    	</style>
    </head>
    <body>
    	<p  class="b_s_1">
    		<br>&nbsp; border-radius: 10em 0.5em/1em<br><br>
    	</p>
    	<p class="b_s_2">
    		<br>&nbsp; border-bottom-right-radius: 30%<br>
    		&nbsp; border-bottom-left-radius: 8px<br><br>
    	</p>
    </body>
    </html>

Пример 3.7. Определение внешнего вида границ элементов (пример №4)

Свойство border-radius, кроме того, может принимать через пробел два, три или даже четыре значения:

- одно значение – радиус задается для всех четырех углов элемента;
- два значения – первое значение задает радиус верхнего левого и нижнего правого углов элемента (расположены по диагонали), второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали);
- три значения – первое значение задает радиус верхнего левого угла элемента, второе – верхнего правого и нижнего левого углов элемента (расположены по диагонали), третье – нижнего правого угла элемента;
- четыре значения – радиусы устанавливаются по часовой стрелке для верхнего левого и верхнего правого углов, затем для нижнего правого и нижнего левого углов элемента.

Если необходимо выделить элемент внешней рамкой, при этом не влияя на его размеры или положение в документе, используются ненаследуемые свойства outline, outline-style, outline-width, outline-color (см. пример 3.8). Все они могут принимать практически те же значения, что и соответствующие свойства, использующиеся для определения внешнего вида границ элементов. Отличие есть только у свойства outline-color, принимающего вместо специального значения transparent значение invert, которое указывает браузеру на необходимость инверсии цвета для того, чтобы гарантировать видимость границы при любом цвете фона элемента.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка границ элементов</title>
    	<style>
    		.b_s_1{
    		border: solid 5px red;
    		outline: dashed 5px green;
    		outline-offset: 8px;
    		}
    		.b_s_2{
    		border: solid 5px violet;
    		outline: groove 8px orange;
    		outline-offset: 3px;
    		}
    	</style>
    </head>
    <body>
    	<br>&nbsp; &nbsp;
    	<span  class="b_s_1">
    		Расстояние между границами равно 8px.
    	</span>
    	<br><br><br><br>&nbsp; &nbsp;
    	<span  class="b_s_2">
    		Расстояние между границами равно 3px.
    	</span>
    </body>
    </html>

Пример 3.8. Определение внешнего вида границ элементов (пример №5)

Для внешних границ дополнительно определено еще одно полезное ненаследуемое свойство outline-offset, которое позволяет задавать расстояние между внешней и внутренней границами. В качестве значения свойство принимает величину расстояния в любых доступных единицах измерения CSS (см. пример 3.8). Кроме того, разрешается использовать и отрицательные значения, тогда рамка будет отображена внутри самого элемента.

Вместо использования внешней рамки имеется возможность эффективного выделения элементов при помощи теней. Для этого применяется ненаследуемое свойство box-shadow, которое создает одну или несколько теней, значения которых тогда нужно перечислять через запятую. Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие размер цвет inset} (см. пример 3.9), где:

- смещение_x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево; если значение параметра равно нулю, то смещение отсутствует;
- смещение_y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз; если значение параметра равно нулю, то смещение отсутствует;
- размытие – необязательный параметр, который устанавливает радиус размытия тени; чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям; если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром;
- растяжение – необязательный параметр, который в случае положительного значения растягивает тень, а в случае отрицательного значения сжимает тень; если же значение не будет установлено, то браузер по умолчанию установит растяжение равное нулю и тень будет иметь те же размеры, что и элемент;
- цвет – определяет цвет тени; т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр;
- inset – тень будет выводиться внутри элемента, при этом она будет располагаться над фоном, но под любым содержимым элемента; данный параметр не является обязательным и может применяться как в качестве первого параметра, так и последнего в списке;
- none – тень добавляться не будет (используется по умолчанию).

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Установка теней элементов</title>
    	<style>
    		.size_1{
    		width: 300px;
    		height: 100px;
            }
    		.p_1{
    		border: solid 5px red;
    		background-color: yellow;
    		box-shadow: 10px 10px 50px 15px blue;
            }
    		.p_2{
    		border: solid 5px orange;
    		background-color: violet;
    		box-shadow: 5px 5px 8px 10px blue inset,
    					10px 10px 8px 10px green,
    					15px 15px 8px 10px red,
    		}
    	</style>
    </head>
    <body>
    	<p  class="p_1 size_1">
    		Одна тень.
    	</p> <br><br><br>

    	<p  class="p_2 size_1">
    		Несколько теней.
    	</p>
    </body>
    </html>

Пример 3.9. Использование свойства box-shadow

Для указания числовых значений параметров свойства box-shadow разрешается использовать все доступные в CSS единицы измерения, а для указания цвета использовать все доступные в CSS цветовые модели.

3.3. Определение внешних отступов элементов. Под внешним отступом элемента подразумевается расстояние от границы текущего элемента до соответствующей границы родительского элемента либо до соответствующей границы соседнего элемента (см. рис. 3.1). Для установки внешних отступов используются ненаследуемые свойства margin, margin-top, margin-right, margin-left, margin-bottom (см. пример 3.10). В качестве значений принимаются величины отступов в любых допустимых в CSS единицах измерения, включая отрицательные значения, а также процентах, которые рассчитываются относительно ширины области содержимого родительского элемента (не ширины самого элемента). Имеется возможность указать в качестве значения параметр auto, который указывает браузеру на автоматическое определение отступов.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Определение внешних отступов элементов</title>
    	<style>
    		.marg_1{
    		margin: 10px;
    		border: solid 1px red;
    		}
    		.marg_2{
    		margin: 30px;
    		border: solid 1px blue;
    		}

    		.b_s{
    		border: solid 2px violet;
    		width: 400px;
    		height: 100px;
    		margin-top: 50px;
    		margin-left: 30px;
    		}
    	</style>
    </head>
    <body>
    	<p  class="b_s"><br>
    		<!-- У строчных элементов вертикальные отступы не работают. -->
    		<!-- У соседних элементов соответствующие отступы  -->
    		<!-- объединяются, при чем используется большее значение -->
    		<span class="marg_1">margin: 10px</span>
    		<span class="marg_2">margin: 30px</span>
    	</p>
    </body>
    </html>

Пример 3.10. Определение внешних отступов элементов

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

Внешние отступы нельзя устанавливать элементам, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.

Следует отметить, что вертикальные отступы не срабатывают в отношении строчных элементов, хотя горизонтальные работают правильно. Кроме того, у элемента 'body' по умолчанию присутствуют внешние отступы, которые отсчитываются относительно края окна браузера. Их можно убрать, задав для тела документа значение margin равное нулю.

3.4. Определение внутренних отступов (полей) элементов. Под внутренним отступом (полем) элемента подразумевается расстояние от внутренней стороны линии границы текущего элемента до соответствующей воображаемой стороны прямоугольника, ограничивающего содержимое элемента (см. рис. 3.1). Для установки полей используются ненаследуемые свойства padding, padding-top, padding-right, padding-left, padding-bottom (см. пример 3.11). В качестве значений принимаются величины полей в любых допустимых в CSS единицах измерения, а также процентах, которые рассчитываются относительно ширины области содержимого родительского элемента (не ширины самого элемента). Кстати, в отличие от внешних отступов, использование отрицательных значений при установке полей не допускается.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Определение внутренних отступов элементов</title>
    	<style>
    		.pad_1{
    		padding: 10px;
    		border: solid 1px red;
    		}
    		.pad_2{
    		padding: 30px;
    		padding-left: 50px;
    		border: solid 1px blue;
    		}

    		.b_s{
    		border: solid 2px violet;
    		width: 400px;
    		height: 100px;
    		margin-top: 30px;
    		margin-left: 10px;
    		}
    	</style>
    </head>
    <body>
    	<p  class="b_s"><br>

    		<span class="pad_1">padding: 10px</span>
    		<span class="pad_2">padding: 30px</span>
    	</p>
    </body>
    </html>

Пример 3.11. Определение внутренних отступов (полей) элементов

Опять же, универсальное свойство padding может принимать через пробел два, три или даже четыре значения, которые задают внешние отступы по описанному выше алгоритму (смотреть).

Как и в случае с внешними отступами, нельзя устанавливать поля элементам, для которых свойство display имеет одно из значений: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column.

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

Контрольные вопросы и задания

1. Что понимается под шириной и высотой элемента (по умолчанию)? Можно ли применять свойства height и width к строчным элементам, строкам и колонкам таблицы?
2. При помощи каких свойств можно задать минимально (максимально) допустимые размеры ширины и высоты? Как браузер определяет размеры в случае применения этих свойств?
3. Перечислите возможные значения группы свойств, отвечающих за определение стиля границ элемента?
4. Какие свойства предназначены для определения ширины и цвета границ элементов?
5. Каким образом задаются параметры границ, устанавливаемые при помощи универсальных свойств (например, border-width)?
6. Опишите свойства, которые отвечают за установку скругления углов границ элементов.
7. Разрешается ли использовать для установки внешних границ элемента отрицательные значения? Если да, то как будут отображены границы в этом случае?
8. Перечислите свойства, при помощи которых задаются внешние отступы элементов. Разрешается ли использовать отрицательные значения этих свойств? Относительно чего рассчитывается величина внешних отступов, задаваемая в процентах?
9. Перечислите свойства, при помощи которых задаются внутренние отступы (поля) элементов. Разрешается ли использовать отрицательные значения этих свойств? Влияет ли установка полей на размеры самого элемента?

Словарь новых английских слов

width [wɪtθ] – ширина.
hidden [ˈhɪdn] – скрытый, спрятанный.
dotted [ˈdɒtɪd] – линия в виде точек.
dashed [daʃt] – штриховая линия.
solid [ˈsɒlɪd] – цельный, сплошной.
double [ˈdʌb(ə)l] – парный, двойной.
groove [ɡruːv] – желобок, канавка, паз.
ridge [rɪdʒ] – ребро, край, гребень.
inset [ˈɪnsɛt] – вставлять, вкладка.

shadow ['∫ædəu] – тень.
outset [ˈaʊtsɛt] – начало, отправление.
thin [θɪn] – тонкий, худой.
thick [θɪk] – толстый, густой.
outline [ˈaʊtlʌɪn] – контур, обвод, очертание.
transparent [tranˈspar(ə)nt] – прозрачный.
margin [ˈmɑːdʒɪn] – поле (страницы).
display [dɪˈspleɪ] – показ, отображение.
padding [ˈpadɪŋ] – внутренние поля (элемент).

belarusweb.net © Петр Романовский, Минск, 2016.