skip to main content

width

css

Кратко 🔗

Свойство width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину строчно-блочных (inline-block) и блочных (block) элементов. На строчные элементы это свойство не будет иметь никакого влияния.

Строчно-блочные (inline-block) элементы по умолчанию подстраиваются под ширину контента, лежащего у них внутри.

Блочные (block) элементы по умолчанию имеют ширину 100%. Если представить сайт как документ с текстом, то блочный элемент займёт всю строку, на которой стоит.

Кроме фиксированной ширины можно задавать элементу минимальную ширину min-width или максимальную ширину max-width.

Пример 🔗

<div class="block">Я — блочный элемент!</div>

<div class="inline-block">Я</div>
<div class="inline-block">строчно-блочный</div>
<div class="inline-block">элемент!</div>
/* Не меняем display для .block, поскольку div уже является блочным */

.block {
background-color: #49a16c;
}

.inline-block {
display: inline-block;
border: 1px solid black;
background-color: #1a5ad7;
}

Благодаря фонам можно увидеть, какую ширину имеет каждый из наших элементов.

Элемент с классом .block занял всю строку, его ширина равна 100% от ширины родителя.

Элементы с классом .inline-block подстроились по ширине под контент и встали в одну строку.

Напишем свойство width и изменим это стандартное поведение:

.block {
width: 50%; /* Ограничим ширину до половины окна */
background-color: #49a16c;
}

.inline-block {
width: 100%; /* Сделаем каждый элемент на всю ширину окна */
display: inline-block;
border: 1px solid black;
background-color: #1a5ad7;
}

Как это понять 🔗

С английского языка слово width переводится как ширина.

Свойство width позволяет управлять шириной элемента согласно поставленной задаче.

Как пишется 🔗

Для фиксированной ширины пишем свойство width. Для минимальной ширины — min-width. Для максимальной ширины — max-width. Эти три свойства можно указывать по отдельности, а также комбинировать для достижения нужного результата.

В качестве значения указываем число и сразу после него без пробела пишем единицу измерения. Ширину можно указывать как в относительных единицах — процентах (%), vw, vmin и так далее, так и в абсолютных единицах — пикселях (px), rem, em и любых других единицах измерения, доступных в вебе.

В данном коде все значения будут рабочими:

selector {
width: 70%;
min-width: 320px;
max-width: 76rem;
}

Подсказки 🔗

💡 По умолчанию у блочных (block) элементов ширина равна 100%. У строчно-блочных (inline-block) элементов ширина равна ширине вложенного контента.

💡 Ширина в процентах рассчитывается от ширины родительского элемента. Если родительский элемент ограничен по ширине, к примеру, 450 пикселями, то у вложенного элемента ширина в 100% будет равна 450 пикселям. То есть 100% от родительского элемента. Если при этом у родителя будут также указаны внутренние отступы (padding), то 100% ширины для ребёнка будут равны 450px минус боковые отступы.

💡 Блочный (block) элемент занимает всю строку вне зависимости от своей ширины. Оставшееся пространство займёт внешний отступ. Поэтому, ограничивая ширину блочному элементу, не ожидай, что элементы, следующие за ним, встанут с ним в одну строку. Если нужно, чтобы все элементы встали в строку, то нужно менять их с блочных (block) на строчно-блочные (inline-block).

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

Именно таким образом принято выравнивать контент сайта по центру окна браузера.

В работе 🔗

Алёна,

Свойство width, пожалуй, самое часто встречающееся свойство в коде. В работе ты будешь манипулировать шириной очень часто.

🛠 Поскольку строчные (inline) и строчно-блочные (inline-block) элементы подстраиваются по ширине под вложенный контент, то в ситуациях, когда контента внутри нет, ширина такого элемента будет равна нулю. Но часто случается, что нам нужен декоративный элемент. В этом случае без зазрения совести задавай ширину. И не забудь про высоту (height ).

К примеру, часто декоративные иконки верстаются при помощи фона для элементов i или span. Поскольку контента по факту в этих элементах нет, их ширина и высота будут равны 0. Пропиши display со значением block или inline-block, задай ширину и высоту иконки и укажи путь до фонового изображения:

<div class="card">
<i class="card__icon"></i>
<!-- Внимание на меня! -->
<h2 class="card__title">Заголовок карточки</h2>
<p class="card__text">Некий текст новостной карточки</p>
</div>
...

.card__icon
{
display: inline-block;
width: 56px;
height: 56px;
background: url('doka-eyes.png') no-repeat center / cover;
}

...

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

Пример макета:

Пример макета

Как не надо делать:

...
<p class="card__text">
Get the official status of an agent <br />
in the projectname and earn with us.
</p>
...

Как можно сделать:

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

...
<p class="card__text">
Get the official status of an agent in the projectname and earn with us.
</p>
...
...
.card__text
{
max-width: 65%;
margin: 0 auto; /* Для выравнивания по центру */
}
...

Теперь любой текст будет занимать не больше, чем 65% от ширины карточки 🎉

🛠 Не стоит совместно использовать и max-width, и min-width у одного элемента. Лучше просто написать width, будет меньше строк.

Автор: Алёна,