Блокова модель документа – друге випробування 16. Як відображаються елементи? Розміри рядково-блочних елементів

У цій статті розглянуто дуже важливий момент верстки веб-сторінок - box model, або блочна система верстки сайтів.

Для розкриття сутності цього поняття звернемося до специфікацій W3C. Цей документ свідчить, що блоковий елемент є прямокутником, який створюється для тегів дерева документа .

Простіше кажучи, теги всередині сторінки при виведенні на екран перетворюються на прямокутники.

Будова блокового елемента

Структура box model не відрізняється особливою складністю.

Грубо кажучи, нагадує матрьошки з прямокутників: найбільший прямокутник - зовнішні поля або відступ, після нього слідує межа самого блокового елемента, потім внутрішні відступи і безпосередньо сам контент.

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

Розмір кожної складової регулюється за допомогою відповідного стилю CSS: margin- Зовнішні поля, border– межі безпосередньо самого елемента, та padding- Величина внутрішніх полів.

Також варто відзначити, що величина полів та кордонів може керуватися незалежно для кожної сторони, що наочно проілюстровано на малюнку знизу:

Принципові відмінності між margin та padding

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

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

Ще одна відмінна риса цих елементів ґрунтується на підрахунку загальної ширини блокового компонента. Стандартно padding входить у цю ширину, а margin – ні. Ця обставина залежить від використовуваної блокової моделі документа.

Різновиди блокових моделей

На сьогоднішній день існує всього 2 різні моделі блокових систем: традиційна, яка ґрунтується на особливостях роботи Internet Explorer 6 та загальнопоширена, заснована на основних принципах постулатів W3C. Остання використовується всіма сучасними браузерами.

Відмінна риса блокових елементів із різних систем

Існує одна єдина відмінність між блоками у традиційній та загальнопоширеній системах. Воно ґрунтується на відмінності у правилах підрахунку висоти та ширини блоку.

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

Однак більш сучасна блокова система, яка регламентується постулатами W3C, при присвоєнні властивостей ширини і висоти враховує тільки контент. Наочна відмінність продемонстрована на малюнку нижче:

Дуже важливо пам'ятати про ці відмінності під час створення нового веб-ресурсу.

Визначення реальних розмірів елементів

Сподіваюся, із традиційним підходом присвоєння висоти та ширини блоку все гранично ясно. Наприклад, якщо веб-майстер у файлі CSS пише такий код:

Block ( width: 200px; padding: 20px; )

То це означає, що елемент з класом block буде шириною 200px, з урахуванням того, що сам контент займатиме 180 px, а 20px, що залишилися, підуть на внутрішній відступ.

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

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

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

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

Саме тому досвідчені веб-майстри намагаються якомога рідше використовувати відсоткове позначення ширини для блокової верстки за правилами W3C.

Підбиваючи підсумки

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

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

Ми познайомилися з HTML і CSS, знаємо, як вони виглядають і як виконати деякі основи. Тепер ми збираємося зануритись трохи глибше і детально розглянути, як елементи відображаються на сторінці та задаються їх розміри.

У процесі ми обговоримо тему, відому як блокова модель і як вона працює з HTML та CSS. Ми також розглянемо декілька нових властивостей CSS та використовуємо деякі значення розмірів, про які розповідали в уроці 3. Давайте почнемо.

Як відображаються елементи?

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

display

Як саме відображаються елементи - як блокові або малі або якось ще, визначається властивістю display. Кожен елемент містить значення властивості display за замовчуванням, але, як і з будь-яким іншим значенням властивостей, це значення може бути переписано. Є чимало значень для властивості display, але найпоширеніші це block, inline, inline-block і none.

Ми можемо змінити значення властивості display елемента, вибравши цей елемент CSS і задавши нове значення властивості display . Значення block зробить цей елемент блоковим.

P ( display: block; )

Значення inline зробить цей елемент малим.

P ( display: inline; )

Найцікавіше це значення inline-block. Його використання дозволить елементу поводитися як блоковий, включаючи всі властивості блокової моделі (які ми невдовзі розглянемо). Однак, елемент буде відображатися на рядку з іншими елементами, а не почнеться з нового рядка за промовчанням.

P ( display: inline-block; )

Демонстрація inline-block

Простір між рядково-блочними елементами

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

На закінчення, використовуючи значення none, повністю приховуємо елемент і відображаємо сторінку, ніби елемента не існує. Будь-які елементи, вкладені в такий елемент, також будуть приховані.

Div ( display: none; )

Знання, як відображаються елементи і як змінити display досить важливо, оскільки display впливає на відображення блокової моделі. У процесі обговорення блокової моделі ми обов'язково поглянемо на ці різні наслідки і як вони можуть вплинути на представлення елемента.

Що таке блокова модель?

Відповідно до концепції блокової моделі, кожен елемент на сторінці є прямокутним блоком і може мати ширину, висоту, поля, межі та відступи.

Це варто повторити: Кожен елемент на сторінці є прямокутним блоком.

Мал. 4.01. Коли ми дивимося на кожен елемент окремо, то можемо побачити, що вони прямокутні, незалежно від їх представлених форм

Кожен елемент на кожній сторінці відповідає блоковій моделі, тому це неймовірно важливо. Погляньмо на неї, поряд з кількома новими властивостями CSS, щоб краще зрозуміти, як ми можемо з цим працювати.

Робота з блочною моделлю

Кожен елемент є прямокутним блоком і є кілька властивостей, які встановлюють розмір цього блоку. Внутрішність блоку визначається шириною і висотою елемента, який може бути заданий властивістю display, вмістом елемента або властивостями width і height. padding та потім border розширюють розміри блоку назовні від ширини та висоти елемента. Нарешті, будь-який вказаний margin йде поза рамки.

Кожна частина блокової моделі відповідає властивості CSS: width, height, padding, border і margin.

Погляньмо на ці властивості всередині деякого коду:

Div ( border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; )

Відповідно до блокової моделі загальна ширина елемента може бути розрахована за наступною формулою:

Margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

Для порівняння, відповідно до блокової моделі загальна висота елемента може бути розрахована за наступною формулою:

Margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Мал. 4.02. Блокова модель включає базову висоту та ширину плюс padding, border та margin

Використовуючи ці формули, ми можемо знайти загальну висоту та ширину блоку з нашого прикладу.

Ширина: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px Висота: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 2

Блокова модель, безперечно, одна з найбільш заплутаних частин HTML та CSS. Ми встановлюємо значення властивості width як 400 пікселів, але фактична ширина елемента 492 пікселя. За замовчуванням блокова модель коробка адитивна. Таким чином, для визначення фактичного розміру блоку ми повинні взяти до уваги поля, межі та відступи для всіх чотирьох сторін блоку. Наша ширина включає не тільки значення властивості width, але і розмір лівого та правого поля, ліву та праву межу, ліві та праві відступи.

Поки що багато з цих властивостей не мають великого сенсу і це нормально. Для уточнення давайте ближче подивимося на всі ці властивості width, height, padding, border та margin, які формують блокову модель.

width та height

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

width

За замовчуванням ширина елемента базується на значенні display. У блокових елементів ширина за умовчанням 100% і займає весь доступний горизонтальний простір. Рядкові та рядково-блокові елементи розширюються та стискаються горизонтально для розміщення їх вмісту. Рядкові елементи не можуть мати фіксований розмір, таким чином, ширина та висота відносяться тільки до немаленьких елементів. Щоб задати певну ширину для немаленьких елементів, використовуйте властивість width :

Div (width: 400px; )

height

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

Div ( height: 100px; )

Розміри рядково-блочних елементів

Будь ласка, пам'ятайте, що малі елементи не приймають властивості width і height і будь-які їх значення. Блокові та рядково-блокові елементи, однак, приймають властивості width і height та відповідні їм значення.

margin та padding

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

margin

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

Div ( margin: 20px; )

Однією з примх margin є вертикальні значення, зверху і знизу, вони не застосовуються до малих елементів, але застосовуються до блокових і рядково-блокових елементів.

padding

Властивість padding дуже схожа на властивість margin, проте розташовується всередині меж елемента. Властивість padding використовується, щоб встановити простір безпосередньо всередині елемента. Ось код:

Div ( padding: 20px; )

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

margin та padding для малих елементів

Рядкові елементи поводяться трохи по-іншому, ніж блочні та малі елементи, коли справа доходить до відступів і полів. Для малих елементів margin працює лише горизонтально - ліворуч і праворуч від елементів. padding працює на всіх чотирьох сторонах малих елементів, однак вертикальні поля зверху та знизу можуть виходити за межі рядка вище та нижче елемента.

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

Встановлення margin та padding

У CSS існує кілька способів встановити значення певних властивостей. Ми можемо використовувати звичайну запис, у якій перераховується кілька властивостей і значень одне одним, у якому кожен значення має власну властивість. Або ми можемо використовувати скорочений запис, перераховуючи декілька значень однієї властивості. Не всі властивості мають скорочений варіант, таким чином, ми повинні переконатися що використовуємо правильну властивість і структуру значень.

Властивості margin та padding існують у звичайному та скороченому вигляді. При використанні скороченої властивості margin , щоб встановити одне значення для всіх чотирьох сторін елемента, ми задаємо одне значення:

Div ( margin: 20px; )

Щоб встановити одне значення для верхньої та нижньої сторони, а інше значення для лівої та правої сторони елемента, вкажіть два значення: спочатку зверху та знизу, потім ліворуч та праворуч. Тут для

ми задаємо відступи 10 пікселів зверху та знизу та 20 пікселів зліва та праворуч:

Div ( margin: 10px 20px; )

Щоб встановити унікальні значення для всіх чотирьох сторін елемента, вкажіть ці значення в наступному порядку: зверху, праворуч, знизу та зліва, рухаючись за годинниковою стрілкою. Тут ми задаємо для

відступи 10 пікселів зверху, 20 пікселів праворуч, 0 пікселів знизу та 15 пікселів зліва.

Div ( margin: 10px 20px 0 15px; )

Використання якості margin або padding з будь-яким числом значень вважається скороченням. У звичайному записі ми можемо встановити значення лише однієї сторони використовуючи унікальні властивості. Після імені кожної з властивостей (margin або padding у даному випадку) йде дефіс та сторона блоку, до якої має застосовуватися значення: top, right, bottom чи left. Наприклад, властивість padding-left приймає лише одне значення та встановить ліве поле для цього елемента, властивість margin-top приймає лише одне значення та встановить верхній відступ для цього елемента.

Div ( margin-top: 10px; padding-left: 6px; )

Коли хочемо визначити лише одне значення margin чи padding , краще використовувати звичайну запис. Це зберігає наш код наочним і допомагає уникнути плутанини на шляху вниз. Наприклад, ви дійсно хочете встановити margin в 0 зверху, праворуч і ліворуч елемента або ж насправді хочете встановити margin знизу в 10 пікселів? Використання звичайного запису для властивостей та значень допомагає нам це робити осмислено. З іншого боку, коли маєш справу з трьома чи більше значеннями, скорочення неймовірно корисне.

Колір відступів та полів

Властивості margin та padding повністю прозорі і не набувають будь-яких колірних значень. Але, будучи прозорими, вони показують колір фону пов'язаних елементів. Для margin ми бачимо колір тла батьківського елемента, а padding бачимо колір фону елемента, до якого застосовується padding.

Межі

Межі розташовуються між відступами та полями, створюючи рамку навколо елемента. Для властивості border потрібно три значення: ширина, стиль та колір. Скорочений запис для border задається в тому ж порядку - ширина, стиль, колір. У звичайному записі ці три значення можуть бути розбиті за властивостями border-width, border-style та border-color. Звичайний запис корисний для зміни чи переписування окремого значення кордону.

Ширина та колір меж можуть бути визначені за допомогою звичайних одиниць розміру та кольору CSS, як описано в уроці 3.

Універсальний селектор

На першому етапі цієї вправи ми представили універсальний селектор. У CSS зірочка (*) це універсальний селектор, який вибирає кожен елемент. Замість перерахування всіх окремих елементів, ми можемо використовувати зірочку для вибору всіх елементів.

Псевдоелементи :before і :after також згадані цьому етапі - це елементи, які можуть динамічно генеруватися через CSS. Ми не будемо застосовувати ці елементи в нашому проекті, однак, при згадці універсального селектора також гарним тоном буде включити ці псевдоелементи на випадок, якщо вони колись з'являться.

Резюме

Візьміть пиріжок і погладьте себе по голові. Я почекаю.

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

Коротко в цьому уроці ми говорили про наступне:

• Як відображаються різні елементи.
• Що таке блокова модель і чому вона така важлива.
• Як змінити розмір елементів з урахуванням висоти та ширини.
• Як додати до елементів margin, padding та border.
• Як змінити розмір елементів та вплив блокової моделі.

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

Блокова модель CSS в англійській мові називається Box model (box – це коробка). Цей переклад трохи допомагає зрозуміти суть блокової моделі. Суть у цьому, що з формуванні сторінки екрані використовуються блоки - прямокутні області экрана.

Блокова модель CSS - одна з основ розуміння CSS, модель форматування документа.

Перед вивченням CSS ви повинні були вивчити HTML, а значить вам повинно бути відомо, що HTML-теги діляться на блокові елементи і малі елементи.

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

  І

  .
• Рядкові елементи - теги, які не створюють своїх блоків, а впливають на відображення вмісту блоку. Приклад таких тегів , , та інші.

Давайте з прикладу розглянемо відмінності цих груп елементів.

Блок тега div.

Блок тега p. Цей шматок текстувиділено тегом em.

Цей приклад наочно показує, що теги

І

створюють свої блоки. Кожен блок розпочався з нового рядка. Для блоку

була задана ширина та висота, а блок

Зайняв всю ширину екрану, його висота дорівнює висоті його вмісту. Щоб це було видно, для обох елементів встановлено жовтий колір фону.

Тег просто відформатував текст усередині блоку

Докладніше про блоки.

Будь-який блоковий елемент має встановлений набір властивостей, які можна змінювати за допомогою CSS.

Основа блоку - його контент або зміст, ширина поля контенту задається властивістю width, а висота властивістю height. Але блок має й інші поля, вони як листя капустяни накладаються один на одного.

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

Ми бачимо, що крім самого поля контенту, блок має ще три властивості:

• Внутрішній відступ - padding - за англійською "набивкою". Набивання - те, що набито, чим заповнена начинка чогось. padding – це частина блоку від краю контенту до кордону.
• Кордон - border - англійською і є "кордон". Кордон блочного елемента можна встановити різними стилями: суцільною лінією, точками, пунктиром; Ви можете встановити колір кордону. Докладно про те, як керувати властивістю border, мова піде нижче.
• Зовнішній відступ - margin - англійською "маржа". В економічному значенні маржа означає різницю між собівартістю та ціною.

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

Іншими властивостями можна керувати за допомогою CSS, встановлюючи їх розмір і деякі інші стильові значення. Давайте розглянемо це з прикладу.

Блок тега div.

Блок тега p. Цей абзац має знання властивостей за умовчанням.

Стиль: padding: 10px.

Стиль: margin: 30px.

Результат має бути таким:

Малюнок 2. Робота прикладу №2.

Ми бачимо чорну (black) рамку завтовшки 3px навколо блоку, створеного тегом

. Перший абзац відформатовано за замовчуванням, за винятком фонового кольору. У другому абзаці встановлено внутрішній відсуп (padding) розміром 10px, видно, що навколо тексту площа заливки фоновим кольором збільшилася. Третій абзац не має внутрішнього відступу, але заданий зовнішній відступ margin розміром 30px. Ми бачимо, що відстань між цим і другим абзацом більше, ніж між другим і першим - це працює зовнішній відступ.

Межі і відступи є обов'язковими властивостями блоку, значення їх може дорівнювати нулю.

Як встановлюються кольори фону для цих властивостей?

• Внутрішній відступ – padding – завжди має колір фону самого елемента, заданого у властивості background-color.
• Кордон - border - її колір задається властивістю border-color.
• Зовнішній відступ – margin – він завжди прозорий, тому колір цієї області збігається з фоновим кольором елемента батька (у нашому випадку це білий фоновий колір елемента встановлений за замовчуванням).

Розширені можливості керування властивостями блоку

Крім управління всіма сторонами блоку одночасно, є можливість керувати кожною стороною кожної властивості окремо. Ось малюнок, який демонструє властивості CSS для такого керування стилями блоку.

Малюнок 3. Блокова модель CSS.

Розглянемо докладніше властивості блоків та наведемо приклади їх використання.

Внутрішній відступ - padding

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

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

Результат має бути таким:

Малюнок 4. Робота прикладу №3.

Ми бачимо красиво оформлений блок із внутрішніми відступами до кордону.

Кордон - border

Межі – це лінії навколо внутрішнього вмісту елемента. Кордон можна встановити для всіх сторін блоку, або для будь-якого числа. Для кордону можна задати товщину, стиль та колір. Для створення рамки (кордону), як писалося раніше, CSS існує властивість border . У цій властивості можна прописати всі характеристики рамки (товщину, стиль та колір). А для створення кордонів на окремих сторонах блоку потрібно скористатися властивостями border-top, border-right, border-bottom та border-left.

Результат виконання коду має бути таким:

Рисунок 5. Робота прикладу №4.

Зовнішній відступ - margin

Відступ - це простір межі блоку до його зовнішнього краю. Відступи встановлюються властивістю margin. Як і у випадку з внутрішніми полями та межами, відступи можна задавати для будь-якої сторони блоку. Наприклад, властивість margin-left управляє відступом блоку з лівого боку.

Особливості зовнішніх відступів.

• Зовнішній відступ завжди прозорий. Він не приймає колір фону або фонове зображення, встановлене для блоку, до якого він відноситься. Однак він приймає тло батьківського елемента.
• Зовнішні відступи підсумовуються. Якщо між блоками задані відступи по 25px, то відстань між ними не буде 50px, а 25px, оскільки зовнішні відступи накладаються друг на друга.
• Для зовнішнього відступу можна ставити негативне значення. Таке значення зсуває блок, наприклад оголошення margin-left: -20px зрушить блок ліворуч на двадцять пікселів.
• Відступи можна ставити у відсотках, такі відступи обчислюються розміру блоку контенту. Це робитиметься щодо як горизонтальних, і вертикальних відступів.

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

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

Мандрiв озирнувся навкруги. У всіх напрямках до обрію була пустеля.

Розглянемо цей приклад докладніше. Результат його виконання має бути таким:

Малюнок 6. Робота прикладу №5.

Для тега

Тут задана рамка завтовшки 1px. Це зроблено для того, щоб було видно, де починається область зовнішнього відступу цього тега.

Один тег

Поміщений у блок

зі встановленим фоновим кольором. Видно, що зовнішній відступ тега

Прийняв фоновий колір тега

. А теги

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

Останній, порожній абзац, має висоту height: 20px, він поміщений у приклад тільки для того, щоб було краще видно, що відстань між абзацами становить 20px і дорівнює висоті цього порожнього абзацу. У таблиці стилів для тега

Задано оголошення margin: 20px, видно що зовнішні відступи абзаців зливаються і відстань між абзацами дорівнює не 40px, а 20px.

Ширина блоку - складова величина, вона складається із суми значень кількох властивостей:

• width – ширина вмісту блоку;
• padding-left та padding-right - внутрішній відступ ліворуч і праворуч від вмісту;
• border-left та border-right - товщина кордону зліва та праворуч;
• margin-left та margin-right - зовнішній відступ ліворуч і праворуч.

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

На малюнку 7 блок позначений чорною пунктирною лінією.

7. Ширина блоку.

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

Порахуємо ширину блоку на прикладі наступного стилю:

Width: 400px; /* Ширина блоку */ padding: 5px; /* Відступ до кордону */ border-width: 3px; /* Товщина кордону */ margin: 7px; /* Зовнішній відступ */

Складемо всі складові, що становлять ширину блоку:

Ширина блоку = 400 + 5 * 2 + 3 * 2 + 7 * 2 = 430px.

Застаріла блокова модель

Історично так склалося, що метод розрахунку ширини блоку описаний вище використовувався не завжди. На даний момент він є стандартом, прийнятим концерном W3C. Але раніше властивість width не було рівною полю контенту, а являло собою постранство блоку, яке включає властивість border . Джерелом такої блочної моделі була компанія MicroSoft і на її основі працював браузер Internet Explorer до версії 7. ​​На малюнку продемонстровано порівняння двох блокових моделей.

Малюнок 8. Дві блочні моделі.

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

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

Властивість box-sizing

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

Докладно вникати у суть проблему не будемо, це не рівень цієї статті. Тут лише зазначу, що застаріла система іноді виявляється корисною. Для можливості змінювати алгоритм блокової моделі CSS3 ввели корисну властивість box-sizing . При значенні border-box ширина блоку починає включати поля та межі, але не зовнішні відступи. Таким чином, призначаючи властивості box-sizing значення border-box ми можемо задавати ширину блоку width у відсотках і спокійно вказувати властивості border і padding потрібної нам величини, не боячись, що зміниться ширина блоку.

p align="justify"> При формуванні висоти блоку використовується та ж формула, що і при формуванні ширини блоку. Висота блоку - це сума висоти поля контенту, кордону, внутрішнього і зовнішнього відступів (верхніх і нижніх звичайно ж). Якщо значення властивості height не вказано, то за замовчуванням встановлюється значення auto , в цьому випадку висота поля контенту обчислюється автоматично і залежить від контенту.

На малюнку 9 показані всі властивості, у тому числі складається сумарна висота блоку, позначеного чорним пунктиром.

Малюнок 9. Висота блоку.

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

Давайте відразу перейдемо наприклад і розглянемо випадок, у якому властивостями блоку width і height призначені значення 200%.

Блоку також заданий фоновий колір, щоб було видно його площу. Ось як він виглядає:

Рисунок 10. Робота прикладу №6.

Ми бачимо, що по горизонталі утворилася смуга прокручування, розмір якої удвічі перевищує розмір вікна браузера, тобто. блок по ширині завжди дорівнює 200% від батьківського елемента – вікна браузера. Але у вертикалі такого ефекту немає. Використання відсотків для вказівки висоти немає сенсу, оскільки висота висота батька за умовчанням немає і її треба вказувати.

Блок із шириною = 200% та висотою = 100%.

Тут батьківському елементу для

- тегу , встановлена ​​висота величиною 50px, і висота для

встановлена ​​100%. Тобто цей тег має висоту 50px.

Рисунок 11. Робота прикладу №7.

Видно, що площа, забарвлена ​​в колір #F3F3D6, збільшилася. Якщо вікно браузера ще зменшити по висоті, з'явиться вертикальна смуга прокручування, чого в минулому прикладі не було.

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

Блок із шириною та висотою = 200%.

Тільки встановивши висоту в 100% для тегів і ми зможемо встановити висоту у відсотках для тега

і вона працюватиме.

Малюнок 12. Робота прикладу №8.

При роботі з висотою блоку слід пам'ятати про ще одну особливість, якщо контент перевищує розмір блоку, то він виходить за його рамки. Ось приклад такого коду:

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

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

Рисунок 13. Робота прикладу №9.

Уникнути подібного дуже просто - досить не ставити висоту контенту (height). Втім, іноді потрібно чітко визначити висоту блоку. У цьому випадку можна використовувати властивість overflow зі значенням auto. Ця властивість у блоці створюватиме смугу прокручування у разі, якщо розмір контенту збільшить розмір блоку.

Додамо в стиль прикладу №9 властивість overflow зі значенням auto і результат буде таким:

Рисунок 14. Властивість overflow зі значенням auto.

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

Малюнок 14. Властивість overflow зі значенням hidden.

Мінімальна та максимальна ширина елемента

У статті також доречно згадати властивості min-width і max-width встановлюють мінімальну і максимальну ширину елемента відповідно.

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

У таблиці наведено правила розрахунку браузерами ширини блоку під час використання цих властивостей.

Табл. 1. Ширина елемента

Значення властивостей					Ширина
min-width	<	width	<	max-width	width
min-width	>	width	>	max-width	min-width
min-width	>	width	<	max-width	min-width
min-width	<	width			width
min-width	>	width			min-width
min-width	>			max-width	min-width
min-width	<			max-width	max-width

Властивість max-width – встановлює максимальну ширину елемента. Приклад використання властивості max-width:

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

Мандрiв озирнувся навкруги. У всіх напрямках до обрію була пустеля.

Мінімальна та максимальна висота елемента

Аналогічно є властивості для призначення мінімальної та максимальної висоти елемента: min-height та max-height.

Від автора:все складається з боксів – це, можливо, найважливіший розуміння момент у CSS. Якщо деталі, то кожен елемент у документі генерує бокс. Бокс може бути блочного чи інлайнового рівня. Тип боксу визначає те, як елемент впливатиме на макет сторінки.

Створюється бокс чи ні, і тип цього боксу залежить від мови розмітки. CSS спроектований як спосіб стилізації HTML-документів, тому модель візуального рендерингу CSS значною мірою корениться у відмінностях між блочними та інлайновими елементами HTML. За замовчуванням елементи p і section створюють бокси блочного рівня, а теги a, span та em створюють інлайнові бокси. SVG взагалі не використовує блокову модель, тому більшість макетних властивостей CSS не працює з SVG.

Бокси блочного рівня створюють нові блоки контенту, як видно з Рисунку 4.1. Блокові бокси рендери вертикально у вихідному порядку і заповнюють (крім таблиць) всю ширину контейнера. Це звичайне відображення значень block, list-item, table та інших table-* значень (наприклад, table-cell).

Малюнок 4.1. бокси блочного рівня в тегах h1, p, ul та table усередині контейнера (сіра область)

Бокси інлайнового рівня не формують нових блоків контенту. Ці бокси створюють рядки всередині блокового боксу. Вони відображаються горизонтально та заповнюють ширину боксу-контейнера, перестрибуючи на нові рядки за потребою, як показано на малюнку 4.2. До боксів інлайнового рівня відносяться значення якості display inline, inline-block, inline-table та ruby.

Малюнок 4.2. приклад інлайнового боксу з margin: 1em та padding: 5px

Але як розраховуються розміри боксу? Ось тут все трохи складніше. На Малюнку 4.3 видно, що розміри боксу складаються з контентної області, padding'а та ширини плюс ширина рамки, як визначено в CSS2. Ширина margin'а створює на елементі margin-бокс і впливає інші елементи в документі, але ніяк не впливає на розміри самого боксу.

Малюнок 4.3. блокова модель за CSS 2.1

Наприклад, тег p з width: 300px, padding: 20px і border: 10px матиме обчислену ширину 360px. Ширина складається із ширини параграфа, лівого та правого паддингу, а також з лівого та правого border-width. Щоб загальна ширина елемента була 300px, при цьому зберігаючи 20px паддінга та 10 пікселів рамки, необхідно задати width: 240px. Більшість браузерів обчислюють ширину саме в такий спосіб. Але це не стосується IE 5.5.

IE 5.5 використовує властивість width як остаточне значення для розмірів боксу, заганяючи паддинг і рамку всередину боксу, як показано на малюнку 4.4. Обидва значення віднімаються з width, зменшуючи розмір контентної області. Багато програмістів вважають такий підхід розумнішим, незважаючи на те, що він працює не за специфікацією.

Рисунок 4.4 блокова модель у CSS 2.1 та блокова модель у старому IE 5.5

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

Вибір блокової моделі за допомогою властивості box-sizing

Властивість box-sizing визначено у специфікації CSS Basic User Interface Module Level 3 і набуває двох можливих значень: content-box і border-box.

За замовчуванням встановлено значення content-box. З цим значенням властивості width і height впливають розмір контентної області, що збігається з поведінкою, описаним у специфікації CSS 2.1. Така поведінка встановлена ​​за умовчанням у сучасних браузерах (як показано на малюнку 4.4).

Значення border-box додає трохи магії. Властивості width і height починають застосовуватися до зовнішньої межі рамки, а не контентної області. Рамка та паддинг малюються всередині боксу елемента, що збігається зі старою поведінкою у IE 5.5. Давайте розберемо приклад, у якому ширина у відсотках поєднана з px на паддингу та рамці:

This is a headline

< div class = "wrapper" > < article > < h2 >This is a headline< / h2 > < p >< / p > < / article > < aside > < h2 >This is a secondary headline< / h2 > < p >Lorem ipsum dolor sit amet, consectetur adipisicing. . .< / p > < / aside > < / div >

До тегів article і aside застосований CSS-код нижче, що дає нам макет, показаний на Малюнку 4.5, де перший елемент має ширину 60%, а другий – 40%:

article, aside ( background: #FFEB3B; border: 10px solid #9C27B0; float: left; padding: 10px; ) article ( width: 60%; ) aside ( width: 40%; )

article, aside ( background: #FFEB3B; border : 10px solid #9C27B0; float: left; padding: 10px; article ( width: 60%; aside ( width: 40%;

Малюнок 4.5. елементи з box-sizing: content-box

За замовчуванням aside і article встановлено властивість box-sizing зі значенням content-box. Значення border-width та padding додають 40 пікселів до ширини елементів, що змінює співвідношення 60%/40%. Давайте додамо до тегів article і aside властивість box-sizing: border-box:

article, aside ( box-sizing: border-box; )

article, aside ( box-sizing: border-box;

Зміни показані на Рисунку 4.6: ширина елементів збереглася, проте через box-sizing: border-box ширина тепер складається також з рамки та паддингу. Width тепер застосовується до зовнішньої грані рамки, а не контентної області, тому наші елементи щільно притиснуті один до одного і не змістилися на новий рядок.

Рисунок 4.6 елементи з box-sizing: border-box

Я б запропонував використовувати властивість box-sizing: border-box. Воно спрощує життя, з ним не потрібно обчислювати width, щоб підігнати ширину під padding та border.

Найкраще застосовувати box-sizing: border-box із правилами скидання. Приклад нижче взято зі статті Кріса Койєра з CSS-Tricks

Блокова модель (box model) – одне з фундаментальних понять верстки.

У специфікації W3C це поняття визначається так:

Блокова модель CSS описує прямокутний блок, що генерується для елемента в дереві документа і виводиться згідно з візуальною моделлю форматування.

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

Структура елемента у блочній моделі

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

Для управління кожною зі складових частин блоку існують відповідні CSS властивості: внутрішні відступи - , межі - , Зовнішні відступи - . За бажання ці властивості можна задати для кожної сторони блоку окремо (див. рисунок):

У чому різниця між внутрішнім та зовнішнім відступом

Отже, для елемента можна задати межі (рамку) та два види відступів. Чим вони відрізняються?

Основна відмінність відразу впадає у вічі: padding — це відступ між контентом і кордоном, а margin — це відступ між кордоном і «зовнішнім світом».

Звідси випливає друга відмінність — якщо елемента задати фон (), то цим фоном заллється і контент і внутрішній відступ (padding). Margin ж, знаходячись зовні, завжди залишається прозорим.

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

Третя відмінність полягає в тому, що padding та margin по-різному беруть участь у підрахунку загальної ширини блоку. Це залежить від прийнятої блокової моделі.

Які бувають блокові моделі

В даний час існують дві основні блокові моделі: модель від W3Cяка підтримується всіма основними браузерами і, так звана, традиційна– її підтримує IE6 у режимі зворотної сумісності.

У чому відмінність різних блокових моделей

Структура блоку елемента абсолютно однакова. Єдине, чим відрізняються різні моделі - це правилами визначення розмірівелемент.

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

У блоковій моделі W3C розміри елемента, що задаються властивостями width і height, включають лише контентну частину. Тобто width і height не включають ні розміри внутрішніх відступів, ні розміри кордонів (див. малюнок).

Дійсна ширина елемента відповідно дорівнюватиме: + + + + .

Відповідно той же приклад "ширина елемента 100px і внутрішній відступ по 10px з кожної сторони" вже дасть блок із загальною шириною 120px! Оскільки width:100px означає саме 100px під контентну зону. Усі відступи та межі додаються до цього фіксованого значення.

Логіка також ясна: головне в блоці — його вміст. І якщо я сказав сто пікселів, значить сто, і ніякі паддінги та бордери мені нічого не змінить!

На перший погляд, все легко і просто! Але не тут було…

Як бути, наприклад, у ситуації, коли width елемента дорівнює 100%, а padding та/або border не дорівнює 0? Тоді дійсна ширина елемента буде більшою за 100%, а це далеко не завжди бажано.

Ось це і є найбільша складність блокової моделі W3C: коли ширина вказана у відсотках, а padding та border у пікселях. Таку ситуацію потрібно, якщо не уникати, то принаймні використовувати рідше та з розумінням питання.

Управління блоковою моделлю

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