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

опис

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

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

синтаксис

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

значення

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

HTML5 CSS2.1 IE Cr Op Sa Fx

height

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

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

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

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

браузери

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

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

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

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

The source for this interactive example is stored in a GitHub repository. If you "d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The min-height and max-height properties override height.

Syntax

/ * Keyword value * / height: auto; / * values * / height: 120px; height: 10em; / * Value * / height: 75%; / * Global values * / height: inherit; height: initial; height: unset;

Values

CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow. "> Defines the height as an absolute value. CSS data type represents a percentage value. It is often used to define a size as relative to an element "s parent object. Numerous properties can use percentages such as width height margin padding and font-size.> Defines the height as a percentage of the containing block "s height. Auto The browser will calculate and select a height for the specified element. Max-content The intrinsic preferred height. Min-content The intrinsic minimum height. Fit-content (CSS data type represents a value that can be either a or a ."> ) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min (max-content, max (min-content,)).

Formal syntax

CSS data type represents a percentage value. It is often used to define a size as relative to an element "s parent object. Numerous properties can use percentages such as width height margin padding and font-size.> border-box content-box available min-content max-content fit-content auto

Example

HTML

I "m 50 pixels tall.

I "m 25 pixels tall.

I "m half the height of my parent.

CSS

div (width: 250px; margin-bottom: 5px; border: 2px solid blue;) #taller (height: 50px;) #shorter (height: 25px;) #parent (height: 100px;) #child (height: 50% ; width: 75%;)

Result

Accessibility concerns

Ensure that elements set with a height are not truncated and / or do not obscure other content when the page is zoomed to increase text size.

Specifications

Specification	Status	Comment
CSS Intrinsic & Extrinsic Sizing Module Level 4	Editor "s Draft
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of "height" in that specification.	Working Draft	Added the max-content, min-content, fit-content keywords.
CSS Transitions The definition of "height" in that specification.	Working Draft	Lists height as animatable.
CSS Level 2 (Revision 1) The definition of "height" in that specification.	Recommendation	Adds support for the CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow. "> values and precises on which element it applies to.
CSS Level 1 The definition of "height" in that specification.	Recommendation	Initial definition.

Initial value	auto
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	The percentage is calculated with respect to the height of the generated box "s containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Media	visual
Computed value	a percentage or auto or the absolute length
Animation type	a CSS data type are interpolated as real, floating-point numbers. "> length, CSS data type are interpolated as real, floating-point numbers."> percentage or calc ();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
height	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 7	Safari Full support 1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
fit-content	Chrome Full support 46	Edge No support No	Firefox No support No	IE No support No	Opera Full support 33	Safari Full support 11 Full support 11 Full support 9 Prefixed Prefixed				Opera Android?	Safari iOS Full support 11 Full support 11 Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
max-content	Chrome Full support 46	Edge No support No	Prefixed Prefixed	IE No support No	Opera Full support 44	Safari Full support 11	WebView Android Full support 46	Chrome Android Full support 46	Prefixed Prefixed Implemented with the vendor prefix: -moz-			Samsung Internet Android Full support 5.0
min-content	Chrome Full support 46	Edge No support No	Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE No support No	Opera Full support 44	Safari Full support 11	WebView Android Full support 46	Chrome Android Full support 46	Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android Full support 43	Safari iOS Full support 11	Samsung Internet Android Full support 5.0
stretch	Chrome Full support 28 Webkit-fill-available"> Alternate Name Full support 28 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name	Edge No support No	Firefox No support No	IE No support No	Opera Full support 15 Webkit-fill-available"> Alternate Name Full support 15 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available	Safari Full support 9 Webkit-fill-available"> Alternate Name Full support 9 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available	WebView Android Full support 4.4 Webkit-fill-available"> Alternate Name Full support 4.4 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available	Chrome Android Full support 28 Webkit-fill-available"> Alternate Name Full support 28 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available	Firefox Android No support No	Opera Android?	Safari iOS Full support 9 Webkit-fill-available"> Alternate Name Full support 9 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available	Samsung Internet Android Full support 5.0 Webkit-fill-available"> Alternate Name Full support 5.0 Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available

Legend

Full support Full support No support No support Compatibility unknown Compatibility unknown Uses a non-standard name. Uses a non-standard name. Requires a vendor prefix or different name for use. Requires a vendor prefix or different name for use.

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

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

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

Назва документу

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

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

спробувати зараз »

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

Загальна висота:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	верхня рамка		верхній відступ		висота		нижній відступ		нижня рамка

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

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

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

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

Назва документу

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

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

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

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

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

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

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

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

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

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

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

width: 100px

width: 100px + padding

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

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

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

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

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

height: 100px

height: 100px + padding

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

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

категорії

Популярне