width

Свойство 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% от ширины карточки 🎉

+ Развернуть