/ ↲
    Расширенный поиск

    CSS

    width

    Управляем шириной элементов.

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

    Кратко

    Скопировано

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

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

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

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

    В современном CSS есть логический аналог этого свойства — inline-size.

    Пример

    Скопировано
            
          
          <div class="block">Я — блочный элемент!</div><div class="inline-block">Я</div><div class="inline-block">строчно-блочный</div><div class="inline-block">элемент!</div>
          <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: #2E9AFF;}.inline-block {  display: inline-block;  background-color: #F498AD;}
          .block {
  background-color: #2E9AFF;
}

.inline-block {
  display: inline-block;
  background-color: #F498AD;
}
    Открыть демо в новой вкладке

    Благодаря фонам можно увидеть, какую ширину имеет каждый из элементов. Элемент с классом .block занял всю строку, его ширина равна 100% от ширины родителя. Элементы с классом .inline-block подстроились по ширине под контент и встали в одну строку.

    Напишем свойство width и изменим это стандартное поведение. Ограничим ширину .block до половины окна, а каждый элемент .inline-block сделаем на всю ширину окна:

            
          
          .block {  width: 50%;  background-color: #2E9AFF;}.inline-block {  width: 100%;  display: inline-block;  background-color: #F498AD;}
          .block {
  width: 50%;
  background-color: #2E9AFF;
}

.inline-block {
  width: 100%;
  display: inline-block;
  background-color: #F498AD;
}
    Открыть демо в новой вкладке

    Как понять

    Скопировано

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

    Как пишется

    Скопировано

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

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

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

            
          
          selector {  width: 70%;  min-width: 320px;  max-width: 76rem;}
          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>
          <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: 50px;  height: 50px;  background: url('doka-eyes.svg') no-repeat center / cover;}
          .card__icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url('doka-eyes.svg') 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>...
          ...
<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>...
          ...
<p class="card__text">
  Get the official status of an agent in the projectname and earn with us.
</p>
...

        
        
          
        
      
            
          
          .card__text {  max-width: 50%;  margin: 0 auto; /* Для выравнивания по центру */}
          .card__text {
  max-width: 50%;
  margin: 0 auto; /* Для выравнивания по центру */
}
    Открыть демо в новой вкладке

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

    Читайте также