Как изменить ширину элемента. Свойство width
- 6 мая 2023
CSS-свойство width определяет ширину элемента на странице. Оно позволяет управлять размером элемента и адаптировать его под разные размеры экрана.
Свойство width записывается так:
selector {
width: значение;
}
Ширина может быть автоматической — если её не указать, то она будет иметь значение auto. В этом случае браузер сам решит, какую ширину установить элементу на основе размеров родительского элемента и содержимого.
Если вы хотите управлять шириной, укажите значение — определённую вами ширину элемента. Тогда она будет постоянной или будет меняться в зависимости от всего вокруг на странице. Можно использовать единицы измерения — например, px, %, em, rem.
Вот так — в пикселях, тогда ширина будет постоянной. В этом случае — 200 пикселей.
p {
width: 200px;
}
А так — в процентах, тогда ширина будет меняться при изменении размеров окна. В этом случае — 50% от ширины родительского элемента.
p {
width: 50%;
}
В любом варианте к ширине нужно относиться внимательно, чтобы всё сошлось с макетом.
Если пока не понимаете, зачем здесь фигурные скобки — прочитайте о селекторах.
Для чего использовать свойство width
Один из вариантов — чтобы ограничить ширину текстового блока и улучшить читаемость на больших экранах. Например, когда вы делаете блог и хотите, чтобы текст не растягивался на всю ширину экрана. Как на этой странице.
Вот так мы стилизуем элемент с шириной 50%, который находится по центру экрана.
p {
width: 50%;
margin: auto;
}
Относительные единицы измерения помогают создавать адаптивные страницы. Попробуйте сами — контейнер будет тянуться вместе с окном браузера.
.container {
width: 100%;
}
Другой вариант использования — создать сетку на основе флексбоксов с фиксированными размерами колонок.
.flex-container {
display: flex;
}
.flex-item {
width: 200px;
}
Это очень простой пример сеток, но если интересно, прочитайте наше пошаговое рукововодство по созданию адаптивных сеток.
С шириной всё вообще непросто — иногда с непривычки могут произойти странные ситуации, из-за которых придётся долго гуглить. Давайте о них поговорим.
Элемент на странице шире, чем вы задумали
Виновато свойство box-sizing, которое по умолчанию имеет значение content-box.
Почему так. Когда вы задаете ширину элемента с помощью свойства width, она применяется только к содержимому элемента и не учитывает его отступы, поля (padding и margin) и границы (border). Это может привести к тому, что общая ширина элемента будет больше, чем ожидалось.
Например, у нас есть такой элемент с классом box:
<div class="box">Контент</div>
И мы применяем следующие стили — ширина 100 пикселей, отступы по 10 пикселей со всех сторон и вдобавок пятипиксельную границу.
.box {
width: 100px;
padding: 10px;
border: 5px solid black;
}
Тогда вспоминаем математику и считаем — общая ширина элемента с заданной шириной 100px будет на самом деле равна 130px.
100px + 2 × 10px (отступы) + 2 × 5px (границы) = 130px
И правда:
Как починить. Нужно включить отступы и границы в заданную ширину элемента. Для этого используйте свойство box-sizing со значением border-box:
.box {
width: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}
Теперь общая ширина элемента будет равна 100px, так как отступы и границы будут включены в указанную ширину. Такое поведение следует учитывать при вёрстке и подготовке макетов, чтобы в результате не оказалось непредвиденных сюрпризов.
Ширина элемента больше ширины родителя
Если ширина нашего элемента случайно оказалась больше, чем у родительского, то он не вместится. И будет как-то так:
Создаём два вложенных элемента с классами parent и child.
<div class="parent">
<div class="child">Элемент</div>
</div>
И стилизуем их. У parent ширина 100 пикселей, а у child — 200.
.parent {
width: 100px;
border: 1px solid black;
}
.child {
width: 200px;
background-color: lightblue;
}
Выше вы уже видели, что произойдёт в этом случае — элемент child с синим фоном будет выходить за пределы родительского элемента с рамкой.
Конечно, иногда так поступают специально — например, чтобы иллюстрации в блоге выходили за пределы колонки с текстом и были покрупнее.
Хотя если указать только width без ограничений, то при уменьшении окна картинка не вместится.
Как починить. Чтобы избежать таких ситуаций, используйте относительные единицы измерения (например, проценты) или свойства min-width, max-width для ограничения минимальной и максимальной ширины.
Например, вы можете установить максимальную ширину для дочернего элемента, чтобы он не превышал ширину родителя:
.child {
max-width: 100%;
background-color: lightblue;
}
Теперь дочерний элемент не будет выходить за пределы родительского элемента, даже если его ширина увеличивается.
Ну и не забывайте тестировать сайты и проверять их в разных браузерах — это важный навык для всех веб-разработчиков в любом году.
👉 Все браузеры поддерживают свойство width, так что смело пользуйтесь.
Материалы по теме
- Не шириной единой — свойство height ещё запутаннее, но тоже важное
- Чем отличаются margin и padding (и как их больше никогда не перепутать)
- Как создавать адаптивные сетки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.
CSS-селекторы. Шпаргалка для новичков
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.
- 8 августа 2025
CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025
Всё самое важное о псевдоклассе :default
Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025
Как работает единица измерения em в CSS
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025
Как найти пустые элементы в CSS
Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 29 июля 2025