Значить height. CSS - Висота блоку щодо його ширини. Відступи з одного боку елемента

Властивості 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 дозволяють працювати із шириною та висотою саме області з вмістом елемента, а не загальною шириною та висотою елемента.

Більшості елементів HTML, як правило, присвоюється певна висота і ширина. Задати дані параметри CSS досить легко, а як результат - практично. Використовуються для цього відомі Вам властивості height і width. Однак, у даному уроці ми ще поговоримо про не фіксовану ширину і висоту або гумову, тобто залежно від ширини самого вікна. Приступимо)

width

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

MyBlock (
width: 400px; /* ширина 400 пікселів */

}
Або ж у відсотках:

MyBlockPercent50 (
width: 50%; /* ширина 50% від ширини блоку або вікна (якщо не всередині блоку з фіксованою шириною) */
color: #f1f1f1; /* світло-сірий блок */
}
Відповідно отримуємо блок, який завжди буде шириною становити половину від батьківського.

Тепер про найцікавіше. Width має такі параметри, які вказують максимальну або мінімальну ширину. Це властивості min-width та max-width відповідно. Вказувати їм значення можна й у пікселях, й у відсотках, й інших величинах. Дані властивості – це основа для створення гумового та адаптивного дизайнів ().

Приклад адаптивного дизайну. Подивися, змінюючи розміри вікна бразура:

Це я, звісно, ​​забіг уперед. Але ви повинні розуміти, що і навіщо потрібно. Та й помацати приємний результат)

Як Ви вже зрозуміли, за допомогою цих властивостей можна гнучкіше поводитися з елементами на сторінці, не спотворюючи вміст. Як це працює? Розглянемо код.

Block (
max-width: 800px;
background-color: #f1f1f1; /* світло-сірий блок */
padding: 20px;
}
Блок з даними властивостями при ширині батька в 200 пікселів прийматиме відповідне значення, але якщо батьківський блок буде більше, наприклад, 1000 пікселів, він вже прийме свою максимальну ширину, тобто 800 пікселів. Тобто він буде збільшуватися, поки ширина батьківського блоку не буде 801 піксель і більше. Далі блок block завжди матиме свою максимально дозволену ширину 800 пікселів.

height

Ця властивість відповідає за висоту елемента. В якості величини використовуються ті самі придатні для CSS. Найчастіше ті самі відсотки та пікселі.

Info (
height: 200px; /* Висота блоку буде 200 пікселів */
padding: 10px; /* Повторюємо для відступи всередині блоку =) */
}
Що логічно, у висоти можна вказувати мінімальні та максимальні значення висоти для елемента властивостями min-height та max-height відповідно.

Info (
max-height: 360px; /* максимальна висота блоку */
min-height: 120px; /* Мінімальна висота блоку */
}
Як бачите, властивості можна, а найчастіше і потрібно використовувати в парі.
Або комбінувати величини:

Content (
height: 100%; /* Висота завжди буде 100% */
width: 760px; /* а ось ширина фіксована 760 пікселів */
}
Якщо залишилися питання, пишіть у коментарях!

Дякую за увагу! Успіхів у верстці!)

Height: 100%

Мабуть, почнемо з того, що простіше. Коли використовувати height: 100%? Насправді питання часто звучить трохи по-іншому: «Як мені зробити так, щоб моя сторінка зайняла всю висоту екрана?». Адже правда?

Для відповіді на нього слід зрозуміти, що height: 100%дорівнює висоті батьківського елемента. Це не магічна «висота всього вікна». Так що, якщо ви захочете, щоб ваш елемент зайняв усі 100% від висоти вікна, то встановити height: 100%буде недостатньо.

Чому? А тому, що батьком вашого контейнера є елемент body, а у нього властивість height встановлено в auto за замовчуванням; отже - його висота дорівнює висоті контенту. Звичайно, ви можете спробувати додати height: 100% body, але цього теж буде недостатньо.

Чому? А все тому ж, батьком елемента body є елемент html, у якого також властивість height і auto і він також розтягується під розмір контенту. А ось тепер, якщо додати height: 100% і до елементу HTML, то все запрацює.

Стало зрозуміліше? Кореневий елемент html насправді не найвищий рівень на сторінці – ним є «viewport». Для простоти будемо вважати, що це вікно браузера. Так ось, якщо встановити height: 100% елементу html, то це те саме, що сказати - стань такою ж висоти, як вікно браузера.

Підсумовуємо отриману інформацію в невеликому шматочку коду:

Html, body, .container ( height: 100%; )
Готово. Якщо вам цікаво заглибитися в тему, як влаштований viewport, я рекомендую .

А якщо у батьківського елемента встановлено властивість min-height, а не height?

Нещодавно, Роджер Йохансен (Roger Johansson) описав проблему з height: 100%, що виявляється, коли батьківський елемент не встановлений height, але вказаний min-height. Я не хочу заглиблюватися у сказане у статті, а перейду одразу до висновків. Вам необхідно встановити height: 1pxдля батька, щоб дочірній елемент зміг зайняти всю висоту, вказану в min-height.

Parent ( min-height: 300px; height: 1px; /* Required to make the child 100% of the min-height */ ) .child ( height: 100%; )
Приклад на jsFiddle.

Більш детально, з цим питанням, ви можете ознайомитись у статті Роджера Йохансена (Roger Johansson).

Width: 100%

Тепер давайте розберемося з width: 100%. Для початку, невелике уточнення: встановлюючи властивість width: 100%Ми хочемо, щоб наш елемент зайняв всю ширину батьківського елемента. Усі стандартно.

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

Якщо додати padding та/або border до елемента з width: 100%, він перестане поміщатися в батьківський елемент. Тому що з'явилися padding та border та ось чому width повинен був називатися content-width. А тепер, будь ласка, подивіться на приклад, що демонструє вищесказане.

Припустимо, ширина батька 25em, а дочірнього елемента - 100% (від ширини батька) і він також має padding рівний 1em (1em справа і1emзліва, сумме2em по горизонталі) і border розміром в 0.5em (0.5 em справа і 0.5 emзліва, сум ), що у результаті дає 25em (100%) + 2em + 1em = 28em.

Є 4 можливі шляхи вирішення цієї проблеми. Перший і, напевно, найкращий спосіб – уникати властивості width: 100%, тим більше, що в даному випадку воно абсолютно марне. Якщо дочірній елемент блоковий, то він і так займе всю ширину батька автоматично (без проблем з padding і border). Але якщо ми працюємо з inline-block елементом, нам не вдасться так просто вирішити цю проблему.

Ми можемо замінити width: 100%на статичний розмір. У нашому випадку 25 - (2+1) = 22em. Звісно ж - це погане рішення, тому що нам потрібно обчислювати ширину вручну. Ходімо іншим шляхом!

Третій спосіб - використовувати calc() для розрахунку ширини: width: calc(100% - 3em). Але воно також не підходить. По-перше, нам все ще потрібно обчислювати розміри padding+border. По-друге, calc() погано підтримується браузерами (не працює в IE 8, Safari 5, Opera 12, рідному браузері Android).

Ідея номер чотири – використовувати властивість box-sizing: border-box. Воно змінює алгоритм розрахунку ширини та висоти елемента так, щоб у них враховувалися властивості padding та border. Відмінна новина, полягає в тому, що box-sizing має хорошу підтримку браузерами (IE8+, Opera 7+). А для всіх інших браузерів можна використовувати polyfill.

Висновок: не використовуйте width: 100%без box-sizing: border-box.

Як не облажатися із z-index.

Всі елементи на сторінці позиціонуються в трьох площинах: крім вертикальної та горизонтальної осі, існує додаткова вісь Z (глибина). Спочатку все виглядає дуже просто - елементи з більшим z-index знаходяться вище елементів з меншим z-index. На жаль, все набагато складніше. Я впевнений, що z-index є найскладнішою css властивістю за всю його історію. А також впевнений, що проблеми пов'язані з z-index зустрічаються найчастіше при роботі з CSS. Сподіваюся, що ми просвітимо можливі шляхи їхнього вирішення.

Для початку. Властивість z-index немає ефекту на статичних елементах. Щоб мати можливість переміщати елемент по осі Z, нам потрібно змінити його позиціонування на relative, absolute чи fixed.

Важливо розуміти в z-index те, що не всі елементи в дереві DOM розміщені на одному рівні. Це означає, що зміна z-index елемента до дуже великого значення, не гарантує того, що він буде поміщений на передній план. Це називається контекстом накладання.

Простими словами, контекст накладання є, свого роду, групою на основі одного HTML елемента, у якого всі дочірні елементи отримують ту ж позицію в контексті і такий же z-index. Зміни z-index елемента можуть призвести до перекривання ним інших елементів, оскільки вам необхідно. Ось як розміщуються елементи в одному контексті накладання (знизу вгору):

1. Фон та межі елемента, що формує контекст
2. Дочірні контексти накладання з негативним z-index (найменший перший)
3. Не позиціоновані елементи
4. Позиціоновані елементи зі значенням z-index, рівним auto або 0
5. Позиціоновані елементи з позитивним z-index (кожен наступний по порядку розташований вище за попередній, при рівності z-index)

Коли ситуація стає неприємною

Отже, ми розглянули основи z-index, розуміння яких заощадить вам купу часу, вже повірте. На жаль, їх замало. Тоді все було б дуже просто.

Справа в тому, що кожен контекст накладання має свою вісь Z. Наприклад, елемент A у контексті 1 та елемент B у контексті 2 не можуть взаємодіяти через z-index. Це означає, що елемент A, як частина контексту накладання, що знаходиться в самому низу загального контексту накладання, ніколи не зможе перекрити елемент B іншого контексту, що знаходиться вище за рівень, навіть з дуже великим значенням z-index.

Але що ще гірше. Елемент HTML створює кореневий контекст накладання. Потім кожен не статично-спозиционированный елемент з властивістю z-index не дорівнює auto, також створює свій контекст накладання. Нічого нового. Але де все починає руйнуватися: деякі, ніяк не пов'язані з контекстом накладання css властивості, також створюють нові контексти. Наприклад, властивість opacity.

Все вірно, якість opacity створює новий контекст накладання. Те саме роблять властивості transform і perspective. Хоча це не має жодного сенсу, чи не так? Наприклад, якщо у вас є елемент з opacity менше 1 або з будь-якою трансформацією, у вас потенційно може виникнути проблема.

На жаль, кожна проблема з z-index має свій контекст (не каламбур), що робить неможливим універсальне рішення.

Давайте підіб'ємо короткий підсумок вищесказаного:

• Перед застосуванням z-index переконайтеся, що встановили властивість position не рівним static
• Не використовуйте більше 5 цифр для значення z-index, це абсолютно безглуздо; в більшості випадків, значення z-index в районі 10 буде більш ніж достатньо
• Переконайтеся, що елемент, який ви хочете перекрити, знаходиться в тому ж контексті накладання.
• Якщо у вас все ще щось працює не так, як має бути, переконайтеся у відсутності трансформацій та opacity вище у батьківських елементів.

В тему, я також рекомендую прочитати What No One Told You About Z-index від Філіпа Волтона (Philip Walton) і офіційну специфікацію css.

Боротьба зі схлопуванням відступів

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

На щастя, як правило, така поведінка очікується. Можливо, тому так і працює (так зазначено в специфікації css). Однак іноді ви не хочете, щоб вертикальні відступи зхлопнулися. Щоб зрозуміти як цього уникнути, ми спочатку подивимося, чому так відбувається. Схлопування відступів може статися у трьох різних випадках.

Сусідні елементи

Коли два сусідні елементи мають вертикальні відступи - вони схлопуються до найбільшого їх. Є кілька способів запобігти хлопуванню:

• clear: left; float: left; (right те саме працює)
• display: inline-block;

Приклад jsFiddle ілюструє роботу фіксів.

Батько та перший/останній дочірній елемент

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

• overflow: hidden (або будь-який інший, але не visible)
• padding: 1px (або інше значення більше 0)
• border: 1px solid transparent (або будь-який інший border)
• float: left (right те саме працює)

Приклад jsFiddle ілюструє роботу фіксів.

Порожні блоки

Коли порожній блок не має меж, padding`ів, висоти, його верхні та нижні відступи хлопаються в один. Так чи інакше, використовувати порожні блоки погана практика, так що таке трапляється не часто.
за авторством Robert Nyman

Browserhacks за авторством Tim Pietrusky і мене

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

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

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

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

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

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

Спробувати

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

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

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

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

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

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

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

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

Рис. 1. Блокова модель елемента

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;) спрацює лише у тому випадку, якщо ширина елемента задана явно.

Рис. 3. margin: 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% ширини блоку-контейнера, інакше його ширина буде зменшена.