Width та height: визначаємо розміри елемента. Параметри css width та height для завдання розмірів елементів html сторінки Означає height

Опис

Встановлює висоту блокових або замінних елементів (до них, наприклад, відноситься тег ). Висота не включає товщину меж навколо елемента, значення відступів та полів.

Якщо вміст блоку перевищує вказану висоту, висота елемента залишиться незмінною, а вміст буде відображатися поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML йдуть послідовно. Щоб цього не сталося, додайте overflow: auto до стилю елемента.

Синтаксис

height: значення | відсотки | auto | inherit

Значення

Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін. При використанні процентного запису висота елемента обчислюється залежно від висоти батьківського елемента. Якщо батько явно не вказаний, то як його виступає вікно браузера. auto встановлює висоту виходячи із вмісту елемента

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат даного прикладупоказано на рис. 1.

Мал. 1. Застосування якості height

Об'єктна модель

document.getElementById("elementID ").style.height

Браузери

Браузер Internet Explorer 6 некоректно визначає height як min-height.

У режимі сумісності Internet Explorer до версії 8.0 включно неправильно обчислює висоту елемента, не додаючи до неї значення відступів, полів і меж.

Internet Explorer до версії 7.0 включно не підтримує значення inherit.

Здрастуйте, шановні читачі! Сьогодні ми розглянемо як задавати розміри блокових елементів веб-сторінки з допомогою cssвластивостей і налаштувати відображення контенту у разі якщо він не міститься в елементі.

width і height — ширина та висота елементів у css

За допомогою атрибутів стилю width і height можна задавати відповідно ширину та висоту блокових елементів:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

Як значення можна використовувати будь-які доступні в css одиниці виміру - наприклад, пікселі (px), дюйми (in), пункти (pt) та ін.

p (width:200px; height:150px)

Крім абсолютних одиниць можна ставити відносне значення розміру елементів у відсотках. У цьому випадку ширина та висота елемента залежатиме від ширини та висоти батьківського елемента. Якщо батько явно не вказаний, розміри залежатимуть від вікна браузера.

div (width:40%;)

Значення auto віддає керування розмірами елемента веб-браузеру і значення за промовчанням. У цьому випадку розміри елемента будуть такі, щоб у ньому повністю вмістився весь вміст.

Розглянемо кілька прикладів.

Результат:

У цьому прикладі ми створили блок div і вклали абзац p з текстом. Для div-а ми суворо поставили розміри 300 на 300 пікселів. У елемента p значення властивостей width і height рівні auto, тому як видно на скріншоті, його ширина встановилася рівною ширині батьківського елемента, а висота стала такою, щоб у ньому помістився текст, що міститься в абзаці.

Тепер змінимо css налаштування для абзацу p і задаємо фіксовані розміри:

Layer2 (
background: #eee;
width:250px;
}

Результат:

Як бачимо ширина абзацу стала вже й дорівнює 250 пікселів, а його висота збільшилася так, щоб вмістився текст, оскільки параметр height залишився рівним auto.

Тепер давайте поставимо висоту і ширину абзацу у відсотках:

Layer2 (
background: #eee;
width:50%;
height:50%;
}

Результат:

Як видно на картинці, ширина елемента p дорівнювала половині ширини елемента div. А висота збільшилася і дорівнювала 75 відсоткам висоти div.

При заданні ширини та висоти будь-яких елементів у відносних одиницях, може знадобитися вказати мінімальні та максимальні можливі розміри. Адже, наприклад, при зміні розмірів вікна браузера розміри елемента можуть зменшуватися і збільшуватися до таких розмірів, що зручність читання сайту стане дуже низькою.

Визначити мінімальну ширину та висоту можна за допомогою атрибутів min-width та min-heigh:

min-width:<ширина>
min-height:<высота>

Аналогічні атрибути стилю max-width та max-height дозволяють задати максимальні розміри:

max-width:<ширина>
max-height:<высота>

Зрозуміло, що при заданні максимальних і мінімальних значень висоти та ширини, розміри елемента не зможуть стати більшими за максимальні і менші від мінімального значень.

Варто уточнити, що завдання параметрів height і width має сенс лише для блокових тегів, оскільки для малих елементів ці параметри браузером не обробляються.

Може вийти так, що при заданні жорстких параметрів висоти і ширини елемента, що міститься в ньому, контент може не вписатися в обмежену область.

Наприклад, зменшимо розміри абзацу p з вище розглянутих прикладів до 100 пікселів:

Layer2 (
background: #eee;
width:100px;
height:100px;
}

Результат:

Як видно, текст вийшов за межі абзацу і виглядає не дуже красиво. Для уникнення подібних ситуацій існує правило css overflow.

Параметр переповнення overflow для приховування (hidden, visible) або прокручування (scroll, auto) контенту

Переповнення контенту може виникнути, коли обмежують ширину і висоту елемента. Розглянемо два абзаци:

Текст першого абзацу

Текст другого абзацу

Результат:

Так як ні ширина ні висота для абзаців не задані, то браузер самостійно розраховує їх, виходячи зі свого власного розуміння значення auto. В результаті абзаци по ширині зайняли весь доступний простір, а по висоті відповідно до контенту, що міститься в них.

Тепер у першого абзацу обмежимо ширину:

Текст першого абзацу

Текст другого абзацу

Результат:

Ширина абзацу очікувано зменшилася, а висота встановилася такою, щоб умістити весь текст.

Ну а тепер обмежимо у першого абзацу та висоту:

Текст першого абзацу

Текст другого абзацу

В результаті вийшло, що текст до такого обмеженого абзацу не влазить і тому він наїхав на область нижнього сусіда. Відповідно, прочитати текст ні в першому, ні в другому абзацах практично неможливо. Саме для управління поведінкою контенту в таких ситуаціях існує правило overflow:

overflow: visible|hidden|scroll|auto|inherit

За замовчуванням overflow приймає значення visible, яке повідомляє браузеру, щоб він відображав вміст, що не вмістився в контейнері. Результат можна побачити на прикладі вище.

Правило приховує все, що не міститься у контейнері:

Значення scroll відобразить в елементі по вертикалі та горизонталі смуги прокручування навіть у тому випадку, якщо весь вміст міститься:

Текст першого абзацу

Текст другого абзацу

Найбільш популярним та логічним рішенням, якщо вам знадобиться зробити смуги прокручування для контейнера є значення auto. У цьому випадку браузер сам визначатиме коли і по яких осях варто відображати смуги прокручування:

Текст першого абзацу

Текст другого абзацу

Результат:

Для налаштування смуг прокручування також можна використовувати атрибути стилю overflow-x та overflow-y, які дозволяють налаштовувати відображення прокручування по окремих осях. Таким чином відповідає за горизонтальну вісь, а за вертикальну вісь.

Тому якщо вам, наприклад, потрібно, щоб в абзаці горизонтальна прокручування не з'являлася ніколи, а вертикальна з'являлася тільки за потребою, то достатньо написати наступне правило css:

p(overflow-x:hidden;overflow-y:auto;)

І завдання буде вирішено.

На цьому все. До нової зустрічі. Не забудьте підписатися на оновлення блогу і буду вдячний, якщо скористаєтеся кнопочками соціальних мереж.

Висота та ширина елементає величинами, що обчислюються. Кожен елемент веб-сторінки утворює прямокутну область, яка у свою чергу складається з кількох областей. області контенту (вмісту), області відступів, області рамкиі області полівелемент.

Між вмістом елемента та його рамкою знаходяться відступи padding , за рамкою елемента поля margin. Область вмісту існує у кожного елемента, інші області є необов'язковими.

1. Висота елемента

Властивість height задає висоту контенту блокового елемента і не впливає на малі елементи display: inline; . Висота малих елементів дорівнює висоті їхнього вмісту. Негативні значення не допускаються. Властивість не успадковується.

Синтаксис

P (height: 100px;)

2. Ширина елемента

Властивість width задає ширину контенту блокового елемента і не впливає на малі елементи display: inline; . Ширина малих елементів дорівнює ширині їхнього вмісту. Негативні значення не допускаються. Властивість не успадковується.

Синтаксис

P (width: 100px;)

3. Висота та ширина абсолютно позиціонованого елемента

Задавати ширину та висоту абсолютно позиціонованого елемента position: absolute; який завжди необхідно, оскільки у разі висота і ширина неявно визначаються усуненням елемента. Якщо для елемента встановлено межі border та поля margin , вони зменшують розміри області вмісту на відповідні значення.

Div ( background: #6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0; ) /*в даному випадку висота елемента 100%, ширина 50% від батьківського блоку*/
Мал. 2. Висота та ширина абсолютно позиціонованого елемента

4. Відступи елемента

За допомогою властивості padding можна встановити відступи одночасно для кількох сторін елемента у такому порядку: . Якщо елемент має тло, він поширюватиметься на відступи у тому числі. Негативні значення не допускаються. Властивість не успадковується.

Якщо задані три значення, наприклад, div (padding: 10px 20px 30px;) , вони розподіляться у такому порядку: перше значення — верхній відступ, друге — правий і лівий відступ, третє — нижній відступ.
Якщо задані два значення, наприклад, div (padding: 10px 20px;) , то перше задасть верхній та нижній відступ, друге – правий та лівий.
Одне значення, наприклад, div (padding: 10px;) , встановить однаковий відступ всім сторін елемента.

Синтаксис

P (Padding: 5px 10px 15px 10px;)

4.1. Відступи з одного боку елемента

Щоб задати відступ тільки з одного боку елемента, потрібно скористатися однією з властивостей padding-top, padding-right, padding-bottom, padding-left, наприклад:

P (padding-left: 10px;)

5. Поля елемента

Більшість елементів відділені один від одного полями. Властивість margin це коротка форма запису полів елемента в наступному порядку: верхнє, праве, нижнє, ліве. Використовується у разі коли потрібно задати поля з кількох сторін, але не обов'язково з чотирьох. Суміжні по вертикалі поля блокових елементів хлопаються, а верхні та нижні поля не мають жодного ефекту на малі елементи. Негативні значення допускаються. Властивість не успадковується.

Якщо задані три значення, наприклад, div (margin: 10px 20px 30px;) , вони розподіляться у такому порядку: перше значення — верхнє поле, друге — праве і ліве поле, третє — нижнє поле.
Якщо задані два значення, наприклад, div (margin: 10px 20px;) , то перше задасть верхнє та нижнє поле, друге - праве та ліве.
Одне значення, наприклад, div (margin: 10px;) , встановить однакові поля всім сторін елемента.

(margin: 0 auto;) спрацює лише тоді, коли ширина елемента задана явно.

Синтаксис

Div (margin: 5px 10px 2px 5px;)

5.1. Поля з одного боку елемента

Властивості margin-top, margin-right, margin-bottom, margin-left керують відповідними полями з кожної сторони елемента, наприклад:

P (margin-left: 10px;)

6. Обмеження ширини та висоти

CSS також підтримує ще кілька властивостей, пов'язаних із встановленням висоти та ширини елементів веб-сторінок: min-height , min-width , max-height і max-width . Ці властивості дозволяють встановлювати мінімальне та максимальне значення ширини чи висоти елемента, даючи елементу можливість заповнити доступний простір. Властивості часто використовуються для адаптивного дизайну веб-сторінок. Застосовується для всіх елементів, крім малих та елементів таблиць. Завжди йдуть після основного правила, тобто. після завдання елементу height або width. Чи не успадковується.

Можна задавати звичайні розміри за допомогою одних одиниць виміру, а обмеження за допомогою інших одиниць, наприклад:

Div ( width: 400px; max-width: 50%; )

Елемент матиме ширину 400px тільки якщо це значення не перевищуватиме 50% ширини блоку-контейнера, в іншому випадку його ширина буде зменшена.

Властивості css width відповідає за значення ширини області з вмістом елемента.

Width: значення | відсотки | auto | inherit

Властивості css height відповідає за значення висоти області з вмістом елемента.

Height: значення | відсотки | auto | inherit

Негативні значення висоти та ширини вказувати не допускаються.

Здавалося б, що з цими властивостями CSS все просто і зрозуміло, але насправді все виявляється не зовсім так просто.

Задавши якомусь елементу на веб-сторінці ширину за допомогою властивості width 500px, це не означатиме, що загальна ширина цього елемента буде 500 пікселів і не більше.

Найголовніше, що потрібно розуміти, властивості width і height задають значення ширини та висоти для області із вмістом.

Властивості width і height - це лише одні з складових з яких буде обчислюватися загальна ширина і висота елемента. Вони вказують ширину та висоту області Content, яку можна побачити на наступному зображенні. Також у формуванні загальної ширини та висоти беруть участь такі властивості як padding, margin та border.

У цьому можна легко переконатись.

Давайте, наприклад, візьмемо два блоки з однаковою шириною width, але одному з них поставимо додатково властивість padding.

За замовчуванням, веб-сторінки мають поведінку, що до значення висоти та ширини додається значення padding для відповідної сторони.

Тобто. загальна ширина елемента складатиметься зі значення властивості width елемента і до неї плюсуватиметься значення padding-left та padding-right.

Для різних типівелементів, які можна зустріти на сторінці загальна ширина та висота елементів вважається за спеціальними формулами.

Для різних типів елементів, які можна зустріти на веб-сторінках значення width і height можуть мати різну поведінку та значення.

Аналогічна ситуація буде з якістю height.

У CSS є особливий алгоритм, за яким обчислюється значення width і height для різних елементів на веб-сторінці. Я не буду зупинятися на цьому алгоритмі, т.к. він дещо складний.

Зараз для нас головне зрозуміти, що властивості width і height дозволяють працювати із шириною та висотою саме області із вмістом елемента, а не загальною шириною та висотою елемента.

За промовчанням для блокових елементів використовується автоширина. Це означає, що елемент буде розтягнутий по горизонталі рівно на стільки, скільки є вільного місця. Висота блокових елементів за промовчанням встановлюється автоматично, тобто. браузер розтягує область вмісту у вертикальному напрямку так, щоб відобразився весь вміст. Щоб встановити власні розміри для області вмісту елемента, можна використовувати властивості width і height .

CSS властивість width дозволяє задати ширину області вмісту елемента, а властивість height висоту області вмісту:

Зверніть увагу, що властивості width і height визначають розмір тільки області вмісту, щоб обчислити загальну ширину блокового елемента, потрібно скласти ширину області вмісту, лівого та правого внутрішніх відступів та ширину лівої та правої рамки. Те саме стосується і загальної висоти елемента, тільки всі значення обчислюються по вертикалі:

Для даного абзацу задаємо тільки ширину та висоту.

Цей абзац містить, крім ширини та висоти, внутрішній відступ, рамку та зовнішній відступ.

У прикладі добре видно, що другий елемент займає більше простору ніж перший. Якщо порахувати за нашою формулою, то розміри першого абзацу – 150×100 пікселів, а розміри другого абзацу:

тобто 180×130 пікселів.

Переповнення елементів

Після того, як ви визначили для елемента ширину і висоту, варто звернути увагу на один важливий момент - вміст, розташований усередині елемента, може перевищити зазначений розмір блоку. У цьому випадку частина вмісту виходитиме за межі елемента, щоб уникнути цього неприємного моменту, можна скористатися CSS властивістю overflow. Властивість overflow повідомляє браузеру, як потрібно вчинити у тому випадку, якщо вміст блоку перевищує його розмір. Ця властивість може набувати одного з чотирьох значень:

• visible - значення, яке використовується браузером за замовчуванням. Вказівка ​​цього значення матиме той самий ефект, як і відсутність установки властивості overflow.
• scroll - додає до елемента смуги прокручування по вертикалі та горизонталі.
• auto - додає смуги прокручування за потреби.
• hidden - приховує частину вмісту, що виходить за межі блокового елемента.