Как задать размер блока в css

rem , em

Относительные единицы измерения, которые считаются от размера шрифта.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Кратко
Пример
Как пишется
Как понять
Подсказки

На практике

Realetive советует
Алёна Батицкая советует

Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

Обновлено 9 мая 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента или — rem (от root ephemeral unit — «главная относительная единица»).

Пример

Скопировать ссылку «Пример» Скопировано

Пусть размер шрифта корневого элемента будет равен 16 пикселям:

 html  font-size: 16px;> html  font-size: 16px; >

Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

 .block  font-size: 1.5rem;> .block  font-size: 1.5rem; >

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em , то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

 .block__elem  width: 5em;> .block__elem  width: 5em; >

А если самому элементу задать размер шрифта 2em , то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

 .block__elem  width: 5em; font-size: 2em;> .block__elem  width: 5em; font-size: 2em; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:

 .selector  width: 10em;> .selector  margin: 5rem;> .selector  width: 10em; > .selector  margin: 5rem; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width , height , padding , margin , border — width и так далее.

Итоговое значение размера, заданное через em и rem , вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem , изменится.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Часто при работе с rem для селектора html пишется следующее CSS-правило:

 html  font-size: 62.5%;> html  font-size: 62.5%; >

Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

�� Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl — , то значение шрифта у также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:

 html  /* 10px */ font-size: 62.5%;> .title-block  /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem;> @media (max-width: 640px)  html  /* 8px */ font-size: 50%; >> html  /* 10px */ font-size: 62.5%; > .title-block  /* 10rem * 10px = 100px */ width: 10rem; /* 2rem * 10px = 20px */ font-size: 2rem; > @media (max-width: 640px)  html  /* 8px */ font-size: 50%; > >

Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение ��

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

Скопировать ссылку «Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?» Скопировано

Скопировать ссылку «Матвей Романов отвечает» Скопировано

Что такое em

Скопировать ссылку «Что такое em» Скопировано

Единицы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.

Это означает, что если установите размер шрифта в родительском как 20px и размер шрифта дочернего как 2em , размер шрифта в дочернем будет равен 40px .

Что такое rem

Скопировать ссылку «Что такое rem» Скопировано

rem — это ещё одна относительная единица для величины шрифта в CSS. Так как em равен размеру пункта текущего шрифта, то rem относится к размеру шрифта корневого элемента. Обычно это тег .

Польза для доступности

Скопировать ссылку «Польза для доступности» Скопировано

Единицы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px . Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью em или rem , будут автоматически обновлены, чтобы сохранить их относительные значения.

Для того, чтобы шрифты на странице были доступными, рекомендуют использовать относительные единицы вместо абсолютных. Это особенно важно для пользователей, которые изменяют размер шрифта, разрядку букв и размеры других элементов для более удобного чтения и взаимодействия. Так изменение настроек шрифта в браузере пользователя не приведёт к проблемам со стилями, читаемостью или непредсказуемым результатам.

block-size

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство block-size CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам width и height и зависит от значения свойства writing-mode .

/* values */ block-size: 300px; block-size: 25em; /* values */ block-size: 75%; /* Keyword values */ block-size: 25em border-box; block-size: 75% content-box; block-size: max-content; block-size: min-content; block-size: available; block-size: fit-content; block-size: auto; /* Global values */ block-size: inherit; block-size: initial; block-size: unset;

Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство inline-size , которое задаёт другое измерение элемента.

Начальное значение	auto
Применяется к	с такими же width и height
Наследуется	нет
Проценты	размер блока, содержащего элемент
Обработка значения	с такими же width и height
Animation type	длина, проценты или calc();

Синтаксис

Значения

Свойство block-size принимает те же значения, что и свойства width , height

CSS — Высота блока относительно его ширины

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

Создание блока с высотой, которая имеет определённый процент от его ширины

Создать HTML структуру из 2 блоков:

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56,25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; } /* При необходимости (для блоков, имеющих данные классы) */ .item-4by3 { padding-top: 75%; /* (3:4)*100% */ } .item-2by1 { padding-top: 50%; /* (1:2)*100% */ } .item-1by1 { padding-top: 100%; /* (1:1)*100% */ }

Применение вышеприведённой технологии при создании карусели Bootstrap

Если вы не знакомы с Bootstrap и хотите узнать что это такое, то можете воспользоваться статьёй Введение в Bootstrap.

Рассмотрим пример, в котором вышеприведённую HTML структуру и CSS код будем использовать для отображения слайдов карусели Bootstrap.

В качестве изображений будем использовать следующие файлы:

carousel_1.jpg (ширина = 736px, высота = 552px, соотношение сторон (высота к ширине) = 1,33);
carousel_2.jpg (ширина = 1155px, высота = 1280px, соотношение сторон (высота к ширине) = 0,9);
carousel_3.jpg (ширина = 1846px, высота = 1028px, соотношение сторон (высота к ширине) = 1,8);
carousel_4.jpg (ширина = 1140px, высота = 550px, соотношение сторон (высота к ширине) = 2,07);
carousel_5.jpg (ширина = 800px, высота = 600px, соотношение сторон (высота к ширине) = 1,33);

Изображения будем задавать как фон. Это позволит использовать в карусели Bootstrap 3 изображения с не одинаковыми соотношениями сторон.

Скриншот карусели Bootstrap 3

HTML разметка карусели:

      
 
 Слайд 1
 
  
 
 Слайд 2
 
  
 
 Слайд 3
 
  
 
 Слайд 4
 
  
 
 Слайд 5
 
 
  Previous  Next

CSS код карусели:

.item-responsive { position: relative; /* относительное позиционирование */ } .item-responsive:before { display: block; /* отображать элемент как блок */ content: ""; /* содержимое псевдоэлемента */ width: 100%; /* ширина элемента */ } .item-16by9 { padding-top: 56.25%; /* (9:16)*100% */ } .item-responsive>.content { position: absolute; /* абсолютное положение элемент */ /* положение элемента */ top: 0; left: 0; right: 0; bottom: 0; background-size: cover !important; }

Размер блока CSS

CSS Размер элемента

Использование CSS для оформления сайтов можно обсудить в специально созданной теме нашего форума.

Размер блока CSS

У нас есть блок, расположенный на странице и имеющий следующий HTML код:

div id="name">Текст внутри блокаdiv>

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

width — ширина
height — высота

Эти значения можно вносить как в пикселях, так и в процентном соотношении по ширине поля, в котором находится блок. Например так даём значение размеров блока в CSS файле:

#name  width: 400px; height: 30px; border: 1px solid black; > #name  width: 40%; height: 40px; border: 1px solid black; >

Текст, картинка, ссылка или другие элементы страницы
Текст, картинка, ссылка или другие элементы страницы

В первом варианте у нас длина блока составляет 400 пикселей, а высота 40 пикселей. Во втором варианте длина занимает 40% поля страницы, а высота 40 пикселей. Специально сделали границы блока чёрным цветом, чтобы можно было видеть наглядно границы элемента, заданные в CSS.

CSS тэги для настройки размера

Основные свойства, определяющие размеры того или иного HTML элемента:

height — свойства высоты.
width — свойства ширины.
max-height — максимальное значение высоты для элемента.
max-width — максимальное значения ширины для элемента.
min-height — минимальное значение высоты для элемента.
min-width — минимальное значения ширины для элемента.

Примечание

Если же есть какие-либо вопросы, как задать размеры тому или иному элементу на странице, то можно задать вопрос в специально созданной теме про CSS на нашем форуме.

Статьи по теме CSS

Размер блока
Оформление линий
Оформление таблиц
Выравнивание блока
Два блока рядом
Настройка ссылок
Настройка фона
Настройка шрифта
Отступы
Оформление картинок
Галерея картинок
Оформление кнопок
Оформление списков
Оформление иконок
Курсор в CSS
Навигационная панель
Выпадающее меню
Формы в CSS
Вёрстка шаблона сайта

CSS Flexbox
CSS Grid
Анимации и переходы CSS
Медиа-запросы CSS
CSS-препроцессоры
CSS-фреймворки

Читать:

Как сохранить мимозу

rem , em

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Realetive советует

Алёна Батицкая советует

На собеседовании

Что такое em

Что такое rem

Польза для доступности

block-size

Синтаксис

Значения

CSS — Высота блока относительно его ширины

Создание блока с высотой, которая имеет определённый процент от его ширины

Применение вышеприведённой технологии при создании карусели Bootstrap

Размер блока CSS

Размер блока CSS

CSS тэги для настройки размера

Примечание

Статьи по теме CSS

Похожие записи