Вимірювання розмірів

3.1 Властивість width

Розміри блоків у CSS відіграють важливу роль у побудові макетів веб-сторінок. Вони визначають, як елементи будуть відображатися і взаємодіяти з навколишніми елементами. Зараз ми розглянемо властивості width, height, max-width та max-height, які дозволяють задавати розміри блоків.

Властивість width задає ширину елемента. Її можна задати в різних одиницях вимірювання, таких як пікселі (px), відсотки (%), em, rem і інші.

Значення

• Автоматичне значення: auto — ширина елемента визначається автоматично на основі його вмісту та оточення
• Абсолютні одиниці: px, pt, cm, mm, in і інші
• Відносні одиниці: %, em, rem, vw, vh і інші

Приклад використання:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Фіксована ширина (200px)</div>
      <div class="box box-percentage">Ширина у відсотках (50%)</div>
    
  

Пояснення коду:

• .box-fixed: елемент із фіксованою шириною 200 пікселів
• .box-percentage: елемент із шириною 50% від батьківського елемента

3.2 Властивість height

Властивість height задає висоту елемента. Її також можна задати в різних одиницях вимірювання.

Значення:

• Автоматичне значення: auto — висота елемента визначається автоматично на основі його вмісту та оточення
• Абсолютні одиниці: px, pt, cm, mm, in і інші
• Відносні одиниці: %, em, rem, vh, vw і інші

Приклад використання:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Фіксована висота (150px)</div>
        <div class="box box-percentage-height">Висота у відсотках (50%)</div>
      </div>
    
  

Пояснення коду:

• .box-fixed-height: елемент із фіксованою висотою 150 пікселів
• .box-percentage-height: елемент із висотою 50% від батьківського елемента

3.3 Властивість max-width

Властивість max-width задає максимальну ширину елемента. Це обмеження, яке запобігає розширенню елемента за межі заданого значення.

Значення:

• Без обмеження: none — елемент може розширюватися до будь-якої ширини
• Абсолютні одиниці: px, pt, cm, mm, in і інші
• Відносні одиниці: %, em, rem, vh, vw і інші

Приклад використання:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Ширина 100% (за замовчуванням)</div>
      <div class="box box-max-width">Максимальна ширина 300px</div>
    
  

Пояснення коду:

• .box-max-width: елемент із максимальною шириною 300 пікселів. Вміст не дозволить елементові розширюватися за межі 300 пікселів

3.4 Властивість max-height

Властивість max-height задає максимальну висоту елемента. Це обмеження, яке запобігає збільшенню елемента за межі заданого значення.

Значення:

• Без обмеження: none — елемент може розширюватися до будь-якої ширини
• Абсолютні одиниці: px, pt, cm, mm, in і інші
• Відносні одиниці: %, em, rem, vh, vw і інші

Приклад використання:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Додатковий текст для демонстрації прокручування.<br>Додатковий текст для демонстрації прокручування.<br>Додатковий текст для демонстрації прокручування.</p>
      </div>
    
  

Пояснення коду:

• -max-height: елемент із максимальною висотою 35 пікселів. Якщо вміст елемента перевищує це значення, він буде прокручуватися завдяки властивості overflow: auto;