Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Высота в css


Высота и ширина элемента

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

Между содержимым элемента и его рамкой находятся отступы padding, за рамкой элемента — поля margin. Область содержимого существует у каждого элемента, остальные области являются необязательными.

Рис. 1. Блочная модель элемента

1. Высота элемента

Свойство height задает высоту контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline;. Высота строчных элементов равна высоте их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

height
Значения:
auto Значение по умолчанию. Элемент будет отображаться в полную величину, независимо от высоты контейнера. Если сверху находится другой блок и для блока не задано обтекание с помощью свойства float, то произойдет наложение.
длина Высота элемента задается в величинах длины, например, px, cm и т.д.
% Вычисляется относительно высоты блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {height: 100px;}

2. Ширина элемента

Свойство width задает ширину контента блочного элемента и не оказывает никакого влияния на строчные элементы display: inline;. Ширина строчных элементов равна ширине их содержимого. Отрицательные значения не допускаются. Свойство не наследуется.

width
Значения:
auto Значение по умолчанию. Элемент занимает всю ширину блока-контейнера. Если для элемента задать поля, рамку или отступы, они будут вычитаться из ширины элемента. Если для элемента задать левое и правое поле, равное auto, то элемент расположится по середине блока-контейнера.
длина Ширина элемента задается в величинах длины, например, px, cm и т.д.
% Ширина вычисляется относительно родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {width: 100px;}

3. Высота и ширина абсолютно позиционированного элемента

Задавать ширину и высоту абсолютно позиционированного элемента position: absolute; не всегда необходимо, так как в данном случае высота и ширина неявно определяются смещением элемента. Если для элемента заданы границы border и поля margin, они уменьшают размеры области содержимого на соответствующие значения.

div { background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; } /*в данном случае высота элемента 100%, ширина 50% от родительского блока*/ Рис. 2. Высота и ширина абсолютно позиционированного элемента

4. Отступы элемента

С помощью свойства padding можно установить отступы одновременно для нескольких сторон элемента в следующем порядке: верхнее, правое, нижнее, левое. Если элемент имеет фон, он будет распространяться на отступы в том числе. Отрицательные значения не допускаются. Свойство не наследуется.

Если заданы три значения, например, div {padding: 10px 20px 30px;}, то они распределятся в следующем порядке: первое значение — верхний отступ, второе — правый и левый отступ, третье — нижний отступ. Если заданы два значения, например, div {padding: 10px 20px;}, то первое задаст верхний и нижний отступ, второе — правый и левый. Одно значение, например, div {padding: 10px;}, установит одинаковый отступ для всех сторон элемента.

padding
Значения:
длина Отступы элемента задаются при помощи единиц длины, например, px, pt, cm.
% Вычисляются относительно ширины родительского элемента, могут меняться при изменении ширины элемента. Отступы сверху и снизу равны отступам слева и справа, т.е. верхние и нижние отступы тоже вычисляются относительно ширины элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {padding: 5px 10px 15px 10px;}
4.1. Отступы с одной стороны элемента

Чтобы задать отступ только с одной стороны элемента, нужно воспользоваться одним из свойств padding-top, padding-right, padding-bottom, padding-left, например:

p {padding-left: 10px;}

5. Поля элемента

Большинство элементов отделены друг от друга полями. Свойство margin — это краткая форма записи полей элемента в следующем порядке: верхнее, правое, нижнее, левое. Используется в случае, когда нужно задать поля с нескольких сторон, но не обязательно с четырех. Смежные по вертикали поля блочных элементов схлопываются, а верхние и нижние поля не оказывают никакого эффекта на строчные элементы. Отрицательные значения допускаются. Свойство не наследуется.

Если заданы три значения, например, div {margin: 10px 20px 30px;}, то они распределятся в следующем порядке: первое значение — верхнее поле, второе — правое и левое поле, третье — нижнее поле. Если заданы два значения, например, div {margin: 10px 20px;}, то первое задаст верхнее и нижнее поле, второе — правое и левое. Одно значение, например, div {margin: 10px;}, установит одинаковые поля для всех сторон элемента.

{margin: 0 auto;} сработает только в том случае, если ширина элемента задана явно.

Рис. 3. margin: auto; для абсолютно позиционированного элемента margin
Значения:
длина Размер отступа задается в единицах длины, например, px, in, em. Значение по умолчанию 0.
% Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется ширина родительского элемента.
auto Значение по умолчанию, браузером вычисляется в ноль. Если для правого и левого отступов установить значение auto, то элемент будет центрирован внутри своего блока-контейнера.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {margin: 5px 10px 2px 5px;}
5.1. Поля с одной стороны элемента

Свойства margin-top, margin-right, margin-bottom, margin-left управляют соответствующими полями с каждой стороны элемента, например:

p {margin-left: 10px;}

6. Ограничение ширины и высоты

CSS также поддерживает еще несколько свойств, связанных с установкой высоты и ширины элементов вeб-стpaниц: min-height, min-width, max-height и max-width. Эти свойства позволяют устанавливать минимальное и максимальное значения ширины или высоты элемента, давая элементу возможность заполнить доступное пространство. Свойства часто используются для адаптивного дизайна веб-страниц. Применяется для всех элементов, кроме строчных и элементов таблиц. Всегда идут после основного правила, т.е. после задания элементу height или width. Не наследуется.

min-height / min-width / max-height / max-width
Значения:
длина Размеры элемента задаются в единицах длины. Значения не могут быть отрицательными.
% Вычисляется относительно ширины/высоты блока контейнера. Изменяются, если изменяется ширина родительского элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Можно задавать обычные размеры при помощи одних единиц измерения, а ограничения размеров при помощи других единиц, например:

div { width: 400px; max-width: 50%; }

Элемент будет иметь ширину 400px, только если это значение не будет превышать 50% ширины блока-контейнера, в противном случае его ширина будет уменьшена.

Урок 9. Ширина и высота в CSS

Большинству элементов в HTML, как правило, присваивается определённая высота и ширина. Задать данные параметры в CSS достаточно легко, а как результат - практично. Используются для этого уже известные Вам свойства height и width. Однако, в данном уроке мы ещё поговорим о не фиксированной ширине и высоте или резиновой, то есть в зависимости от ширины самого окна. Приступим) Это свойство устанавливает определённую ширину HTML элемента. Значение может быть указано в пикселях, процентах (другие величины используются реже). .myBlock {   width: 400px; /* ширина 400 пикселей */   color: #f1f1f1; /* светло-серый блок */ } Или же в процентах: .myBlockPercent50 {   width: 50%; /* ширина 50% от ширины блока или окна (если не внутри блока с фиксированной шириной) */   color: #f1f1f1; /* светло-серый блок */ } Соответственно получаем блок, который всегда будет по ширине составлять половину от родительского. Теперь о самом интересном. У width есть такие параметры, которые указывают максимальную или минимальную ширину. Это свойства min-width и max-width соответственно. Указывать для них значения можно также и в пикселях, и в процентах, и в других величинах. Данные свойства - это основа для создания резинового и адаптивного дизайнов ().

Пример адаптивного дизайна. Посмотри, изменяя размеры окна бразура:

Демонстрация Скачать исходники

Это я, конечно, забежал вперёд. Но вы должны понимать что и зачем нужно. Да и потрогать приятный результат) Как Вы уже поняли, с помощью этих свойств можно более гибко обращаться с элементами на странице, не искажая содержимого. Как это работает? Рассмотрим код. .block {   max-width: 800px;   background-color: #f1f1f1; /* светло-серый блок */   padding: 20px; } Блок с данными свойствами при ширине родителя в 200 пикселей будет принимать соответствующее значение, но если родительский блок будет больше, например, 1000 пикселей, то он уже примет свою максимальную ширину, то есть 800 пикселей. То есть он будет увеличиваться пока ширина родительского блока не будет 801 пиксель и больше. Далее блок block всегда будет иметь свою максимально разрешённую ширину в 800 пикселей.

Демонстрация Скачать исходники

Это свойство отвечает за высоту элемента. В качестве величины используются всё те же пригодные для CSS. Чаще всего те же проценты и пиксели. .info {   height: 200px; /* высота блока будет 200 пикселей */   padding: 10px; /* повторяем про отступы внутри блока =) */ } Что логично, у высоты можно указывать минимальные и максимальные значения высоты для элемента свойствами min-height и max-height соответственно. .info {   max-height: 360px; /* максимальная высота блока */   min-height: 120px; /* минимальная высота блока */ } Как видите, свойства можно, а зачастую и нужно использовать в паре. Или комбинировать величины: .content {   height: 100%; /* высота всегда будет 100% */   width: 760px; /* а вот ширина фиксированная 760 пикселей  */ } Если остались вопросы, пишите в комментариях!

Спасибо за внимание! Успехов в вёрстке!)

Предыдущая статья Урок 8. Как установить цвет текста и фон элемента в CSS? Следующая статья Урок 10. Плавающие элементы

Высота и ширина элементов в CSS

❶Создать сайт > ❷Справочник CSS

Содержание:

Свойства HEGHT, WIDTH

Свойство Значения Пр* Нc*
height width ВЫСОТА (ШИРИНА), %, auto, inherit * -

Свойство Height определяет высоту содержимого элемента.

Свойство Width задаёт ширину содержимого элемента. Оба свойства не учитывают ширину рамки, полей и отступов. Однако для разных случаев браузеры определяют высоту и ширину по-своему. Например, для html5 браузер Chrome прибавляет ширину рамки и отступов к высоте и ширине элемента, а внешнее поле Margin лежит за их пределами и не учитывается.

Область применения*: блочные и замещаемые элементы.

При переполнении области содержимого элемента, оно выступает за его границы. Чтобы подобного не происходило можно применять значение auto или использовать свойство Overflow, которое определяет, что делать с таким содержимым.

Пример:

.element { height: 90px; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;} .element { height: auto; width: 100px; margin: 15px; padding: 15px; border: 2px solid #000;} — в первом случае задана фиксированная высота 90px, а содержимое переполнило область содержимого элемента и вышло за его пределы;

— во втором примере, для высоты установлено значение auto, которое можно аналогично применять и для ширины:

Значения:

Используются принятые единицы CSS.

• % — относительно высоты, ширины родительского элемента. • auto — устанавливает высоту, ширину согласно фактической области содержимого элемента. • inherit — наследование свойства родителя.

Свойства max-height, min-height и max-width, min-width

Свойство Значения Пр* Нc*
max-height max-width ВЫСОТА (ШИРИНА), %, none, inherit * -
min-height min-width ВЫСОТА (ШИРИНА), %, inherit * -

Эти свойства устанавливают максимально и минимально допустимые ширину и высоту элементов. Это может понадобиться, например, для отображения одинаковой высоты блоков с неодинаковой по объёму областью содержимого. Или ограничить максимально допустимую ширину колонки или экрана.

Область применения*: все, кроме строковых незамещаемых элементов и элементов таблиц.

Значения:

Тоже, что и у свойств Height и Width. Начальное значение для свойст Min-height и Min-width — 0.

• none — свойство не работает.

Пример:

#sidebar { width: 250px;} #main { max-width: 1024px;} — для боковой колонки задана фиксированная ширина;

— для второй, главной, с основным контентом, установлена максимально допустимая, т.е. общая ширина сайта будет «резиновая», но максимум 1024px. Конечно, в примере не учтены возможные отступы, поля и рамки.

Содержание:

О партнёрках

получить

Сайт с нуля

получить

Прибыльный блог по системе «Турбина»

Бесплатные курсы по созданию сайтов

Выбор хостинга

Все курсы Евгения Попова

Справочник HTML

Инфобизнес в деталях

Создание рисованного видео

Видеокурсы по Photoshop. Обработка фотографий

Продвижение партнёрских продуктов

Лучшие партнёрки инфопродуктов

Вёрстка HTML5

Высота и ширина элемента в CSS, использование префиксов min и max

При работе с каскадными таблицами стилей css, одними из наиболее часто используемых свойств являются свойства height (высота) и width (ширина). Они применяются к блочным элементам. Высота и ширина не включают толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента. Это добавит к элементу полосу прокрутки.

В качестве значений свойств height и width принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt), проценты (%) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если размеры родительского элемента явно не указаны, то в его качестве выступает окно браузера.

Даже если вы только начали работать с CSS, очень может быть, что вам уже довелось использовать свойства height и width. Однако вы могли заметить, что данные свойства могут накладывать лишние ограничения на элементы страницы. Поэтому полезно знать и применять связанные свойства, использующие префиксы «min» и «max».

min-width / min-height

Свойства min-width и min-height принимают значения единиц измерения таким же образом, что и свойства height и width, таким образом нет разницы в синтаксисе. Можно использовать любые приемлемые единицы измерения, включая пиксели, единицы em и проценты.

Данные свойства указывают браузеру как отображать элемент при минимальном размере. Вот пример использования обоих свойств:

.element { min-height: 200px; min-width: 200px;}

Блочный элемент с таким кодом будет иметь минимальные размеры 200 на 200 пикселей даже если элемент пустой. Однако, поскольку блочный элемент будет по умолчанию занимать всю доступную ширину, только значение min-height в реальности будет иметь значение.

Чтобы увидеть эффект от min-width можно для данного элемента добавить свойство float.

max-width / max-height

Так же, как и в случае с префиксом «min», свойства max-width и max-height имеют обычные единицы измерения. Но на этот раз вместо минимального размера элемента, данные свойства задают максимальный размер. Еще один пример:

.element { width: 15%; height: 15%; max-height: 200px; max-width: 200px;}

Обратите внимание, что сейчас я указал процентные значения для ширины и высоты, но ограничил максимальные ширину и высоту 200 пикселями. Ширина в 15% рассчитывается исходя из размера родительского элемента. Но даже если родительский элемент равен 5000 пикселей в ширину, блок с селектором класса .element будет не шире 200 пикселей, что и является заданной максимальной шириной.

Вывод

Вам придется очень часто использовать минимальную/максимальную ширину и высоту в своем коде CSS. Поэтому нужно хорошенько разобраться в тонкостях их применения. Хотя тут нет ничего сложного, но у неопытного пользователя часто возникают некоторые трудности при их использовании. Если у вас возникнут какие-либо затруднения — напишите о них в комментариях. Я постараюсь Вам помочь.

Также не забудьте подписаться на обновления сайта.


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!