Блокова модель CSS

Чи запам'ятали ви протягом минулої
лекції,

як можна зробити щось схоже на блок,

додавши тег і властивість "колір фону"?

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

незалежно від того чи він для вас
має вигляд блока, чи ні.

Цей заголовок є блоком...

цей абзац є блоком... навіть ця
частина є блоком.

Деякі з блоків є великі, деякі маленькі,

деякі рядкові, як ,

деякі згруповані, як .

Але всіх їх браузер вважає блоками.

Чому це важливо? Тому що існує
так звана "блокова модель",

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

Кожен блок з елементами
має чотири частини:

зміст, внутрішні відступи, межі
та зовнішні відступи.

Ми можемо використовувати CSS для зміни
меж і внутрішніх та зовнішніх відступів.

Ви скоро зрозумієте, що це все таке.

Почнімо з зовнішніх відступів.

Це чітка межа навколо блоку, що відділяє
його від інших елементів.

Ми визначимо ці відступи за допомогою
наших улюблених одиниць — пікселів.

Щоб зробити зовнішні відступи блоку
"official-info" по 15 пікселів з кожного боку,

ми просто напишемо: margin: 15px

Бачите, як все змінилось?

А що як ми захочемо зробити різні відступи
з кожної сторони?

Наприклад, більші відступи зверху, ніж зліва?

Ми можемо написати значення
за годинниковою стрілкою,

починаючи з верху: top 15px, right 0px,
bottom 10px, left 6px

Або ми можемо визначити значення окремо
для кожної сторони,

якщо ми хочемо визначити
лише деякі з сторін.

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

справа...

і також ми хочемо зробити відступи знизу...

і ми б хотіли мати стандартні значення
для інших сторін.

Існує також особливе значення відступів,
що дозволяє робити дещо цікаве

з нашими сторінками.

Щоб показати його вам, я додам тег
для цілої сторінки.

Я дам йому id "container" (вмістилище).

Поставмо цей тег тут, щоб він вмістив
в собі всю інформацію.

Зараз я додам правило для цього ,

який зробить його ширину 400 пікселів,

і я хочу розмістити його по центру сторінки.

Я могла б визначити margin-left: 100px;

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

але, можливо, вам так не здаватиметься,

тому що ваш браузер більший або менший.

Ми хочемо мати можливість сказати:

Зроби такі відступи,
які будуть однакові з обох боків.

Це саме те, що робить margin: auto;

І це чудовий спосіб розмістити блок з інформацією
по центру сторінки.

Тепер, коли ми розмістили блок по центру,
ми, можливо, хочемо зробити його

ще чіткішим, додавши межі навколо нього,
використовуючи властивість CSS "border".

Додаймо червоні межі тегу .
Ми пишемо "border", і далі

нам лише потрібно визначити
три аспекти меж:

товщину, стиль та колір.

Для тонких меж я напишу 1 піксель,

для неперервної лінії, нічого
незвичного — "solid" (неперервний),

і щоб зробити їх червоними, я напишу rgb
і виберу вогнянисто-червоний колір.

Гаразд, так само як і з відступами,
ми можемо визначити межі

для якоїсь одної сторони.

Наприклад, якщо я хочу справді товсту
фіолетову межу зверху,

я додам ще одну властивість:

border-top: 10px solid purple;

Класно! Тепер додаймо рамочку до
зображення і побавмось трохи

зі стилями меж.

Перейдімо вгору до правила "cute-cat" і додаймо

border: 6px groove red
(насичений червоний).

Мені не подобається слово "groove",
спробуймо "double" (подвійний)?

Ех, спробуймо слово "ridge" (втиснутий)?
Ага! Тепер це виглядає як рамочка.

Тепер... Як щодо меж навколо абзацу
"official-info"?

Що ж... "border", зробімо їх не дуже
широкими, "2px,"

Я спробую "dotted" (крапковий пунктир),

і далі виберу ніжно-сірий колір...
хм, краще вибрати "dashed" (пунктирний).

Добре, це те, що мені потрібно.

Але... є дещо, що мене
трохи тривожить у всіх цих межах.

Насправді, це мене дуже сильно
тривожить.

Бачите, як близько до меж
тега "container" розташований текст?

І як розташований текст в "official-info"?

Це виглядає вкрай неакуратно
і заважає читати текст.

Саме тут нам знадобиться частина "padding"
(внутрішні відступи).

Неважливо чи у вас є колір фону та межі,
вам майже завжди потрібно додавати

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

Додаймо внутрішні відступи до
тега "container", просто...

додаймо 15 пікселів з кожної сторони.
Оу... значно краще.

Додаймо внутрішні відступи до тега
"official-info". Скажімо, 6 пікселів.

Чудово! Нам не потрібно додавати
внутрішні відступи до зображення,

оскільки воно й так виглядає добре
всередині рамочки.

Ось ви і побачили блокову модель.

Зовнішні відступи, межі
і внутрішні відступи.

Я використовувала великі значення
і яскраві кольори,

щоб продемонструвати їх вам,
але моя сторінка має зараз

трохи дурний вигляд.

Якщо ви хочете, щоб ваша сторінка

виглядала вишукано та красиво,
старайтесь використовувати

світло-сірі ті білі тони.

Що б ви не робили, переконайтесь,
що ви використали ці властивості,

адже вони мають великий вплив на те,
як виглядає ваша сторінка.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"