0:00:00.000,0:00:02.677
Чи запам'ятали ви протягом минулої [br]лекції,

0:00:02.677,0:00:05.097
як можна зробити щось схоже на блок,

0:00:05.097,0:00:07.902
додавши тег  і властивість "колір фону"?

0:00:08.492,0:00:13.399
Насправді, кожен елемент на вашій сторінці[br]браузер розглядає як блок,[br]

0:00:13.399,0:00:16.149
незалежно від того чи він для вас [br]має вигляд блока, чи ні.

0:00:16.149,0:00:18.348
Цей заголовок є блоком...

0:00:18.348,0:00:23.508
цей абзац є блоком... навіть ця[br]частина  є блоком.

0:00:24.488,0:00:28.028
Деякі з блоків є великі, деякі маленькі,[br]

0:00:28.028,0:00:30.888
деякі рядкові, як ,

0:00:30.888,0:00:32.888
деякі згруповані, як .

0:00:32.888,0:00:36.188
Але всіх їх браузер вважає блоками.

0:00:36.188,0:00:40.650
Чому це важливо? Тому що існує[br]так звана "блокова модель",

0:00:40.660,0:00:44.100
яку ви можете побачити на діаграмі,[br]яку я щойно вставила.

0:00:44.100,0:00:46.530
Кожен блок з елементами[br]має чотири частини:

0:00:46.530,0:00:51.323
зміст, внутрішні відступи, межі[br]та зовнішні відступи.

0:00:51.323,0:00:54.417
Ми можемо використовувати CSS для зміни[br]меж і внутрішніх та зовнішніх відступів.

0:00:54.437,0:00:57.227
Ви скоро зрозумієте, що це все таке.

0:00:57.717,0:00:59.207
Почнімо з зовнішніх відступів.

0:00:59.207,0:01:03.827
Це чітка межа навколо блоку, що відділяє[br]його від інших елементів.

0:01:04.514,0:01:08.309
Ми визначимо ці відступи за допомогою[br]наших улюблених одиниць — пікселів.

0:01:08.719,0:01:13.929
Щоб зробити зовнішні відступи блоку [br]"official-info" по 15 пікселів з кожного боку,

0:01:13.929,0:01:20.139
ми просто напишемо: margin: 15px

0:01:20.139,0:01:22.284
Бачите, як все змінилось?

0:01:22.307,0:01:25.737
А що як ми захочемо зробити різні відступи[br]з кожної сторони?

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

0:01:29.277,0:01:31.567
Ми можемо написати значення[br]за годинниковою стрілкою,

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

0:01:42.483,0:01:46.123
Або ми можемо визначити значення окремо [br]для кожної сторони,

0:01:46.123,0:01:48.203
якщо ми хочемо визначити [br]лише деякі з сторін.

0:01:48.203,0:01:53.762
Наприклад, ми хочемо додати відступи[br]біля зображення котика...

0:01:53.762,0:01:55.822
справа...

0:01:55.822,0:02:00.302
і також ми хочемо зробити відступи знизу...

0:02:00.302,0:02:03.812
і ми б хотіли мати стандартні значення[br]для інших сторін.

0:02:04.422,0:02:08.522
Існує також особливе значення відступів,[br]що дозволяє робити дещо цікаве

0:02:08.522,0:02:09.862
з нашими сторінками.

0:02:09.862,0:02:14.284
Щоб показати його вам, я додам тег [br]для цілої сторінки.

0:02:14.284,0:02:18.234
Я дам йому id "container" (вмістилище).

0:02:18.234,0:02:23.024
Поставмо цей тег тут, щоб він вмістив [br]в собі всю інформацію.

0:02:23.024,0:02:27.484
Зараз я додам правило для цього ,[br]

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

0:02:30.484,0:02:33.474
і я хочу розмістити його по центру сторінки.

0:02:33.474,0:02:37.634
Я могла б визначити margin-left: 100px;[br]

0:02:37.634,0:02:40.014
бо так мені здається, що він буде [br]знаходитися по центру,

0:02:40.014,0:02:41.674
але, можливо, вам так не здаватиметься,[br]

0:02:41.674,0:02:44.234
тому що ваш браузер більший або менший.

0:02:44.234,0:02:46.499
Ми хочемо мати можливість сказати:

0:02:46.499,0:02:51.481
Зроби такі відступи, [br]які будуть однакові з обох боків.

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

0:02:55.761,0:02:59.061
І це чудовий спосіб розмістити блок з інформацією[br]по центру сторінки.

0:02:59.541,0:03:02.811
Тепер, коли ми розмістили блок по центру,[br]ми, можливо, хочемо зробити його

0:03:02.811,0:03:08.502
ще чіткішим, додавши межі навколо нього,[br]використовуючи властивість CSS "border".

0:03:08.502,0:03:13.503
Додаймо червоні межі тегу .[br]Ми пишемо "border", і далі[br]

0:03:13.503,0:03:16.953
нам лише потрібно визначити[br]три аспекти меж:

0:03:16.953,0:03:18.973
товщину, стиль та колір.

0:03:18.973,0:03:22.483
Для тонких меж я напишу 1 піксель,[br]

0:03:22.483,0:03:26.603
для неперервної лінії, нічого [br]незвичного — "solid" (неперервний),

0:03:26.603,0:03:35.253
і щоб зробити їх червоними, я напишу rgb[br]і виберу вогнянисто-червоний колір.

0:03:36.453,0:03:39.459
Гаразд, так само як і з відступами,[br]ми можемо визначити межі

0:03:39.459,0:03:41.129
для якоїсь одної сторони.

0:03:41.129,0:03:45.458
Наприклад, якщо я хочу справді товсту [br]фіолетову межу зверху,

0:03:45.458,0:03:47.478
я додам ще одну властивість:

0:03:47.478,0:03:53.728
border-top: 10px solid purple;

0:03:53.728,0:03:58.728
Класно! Тепер додаймо рамочку до[br]зображення і побавмось трохи

0:03:58.728,0:04:00.515
зі стилями меж.

0:04:00.515,0:04:03.455
Перейдімо вгору до правила "cute-cat" і додаймо

0:04:03.455,0:04:10.475
border: 6px groove red[br](насичений червоний).

0:04:10.475,0:04:16.455
Мені не подобається слово "groove", [br]спробуймо "double" (подвійний)?

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

0:04:19.975,0:04:24.765
Тепер... Як щодо меж навколо абзацу[br]"official-info"?

0:04:24.765,0:04:28.435
Що ж... "border", зробімо їх не дуже[br]широкими, "2px,"

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

0:04:31.200,0:04:35.960
і далі виберу ніжно-сірий колір...[br]хм, краще вибрати "dashed" (пунктирний).

0:04:35.960,0:04:39.500
Добре, це те, що мені потрібно.[br]

0:04:39.500,0:04:42.438
Але... є дещо, що мене[br]трохи тривожить у всіх цих межах.

0:04:42.438,0:04:45.018
Насправді, це мене дуже сильно[br]тривожить.

0:04:45.018,0:04:50.178
Бачите, як близько до меж [br]тега "container" розташований текст?

0:04:50.178,0:04:54.068
І як розташований текст в "official-info"?

0:04:54.068,0:04:58.478
Це виглядає вкрай неакуратно[br]і заважає читати текст.

0:04:58.478,0:05:01.008
Саме тут нам знадобиться частина "padding" [br](внутрішні відступи).

0:05:01.008,0:05:05.092
Неважливо чи у вас є колір фону та межі, [br]вам майже завжди потрібно додавати

0:05:05.092,0:05:08.492
внутрішні відступи, щоб додати трохи [br]вільного місця між наповненням та краями.

0:05:08.492,0:05:12.725
Додаймо внутрішні відступи до[br]тега "container", просто...

0:05:12.725,0:05:17.985
додаймо 15 пікселів з кожної сторони.[br]Оу... значно краще.

0:05:18.421,0:05:25.811
Додаймо внутрішні відступи до тега[br]"official-info". Скажімо, 6 пікселів.

0:05:25.811,0:05:28.972
Чудово! Нам не потрібно додавати[br]внутрішні відступи до зображення,

0:05:28.972,0:05:31.782
оскільки воно й так виглядає добре[br]всередині рамочки.

0:05:31.782,0:05:34.822
Ось ви і побачили блокову модель.

0:05:34.822,0:05:36.492
Зовнішні відступи, межі [br]і внутрішні відступи.

0:05:36.492,0:05:38.492
Я використовувала великі значення[br]і яскраві кольори,

0:05:38.492,0:05:40.710
щоб продемонструвати їх вам, [br]але моя сторінка має зараз

0:05:40.710,0:05:42.490
трохи дурний вигляд.[br]

0:05:42.490,0:05:43.760
Якщо ви хочете, щоб ваша сторінка

0:05:43.760,0:05:45.520
виглядала вишукано та красиво,[br]старайтесь використовувати

0:05:45.520,0:05:47.490
світло-сірі ті білі тони.

0:05:47.490,0:05:49.520
Що б ви не робили, переконайтесь,[br]що ви використали ці властивості,

0:05:49.520,0:05:53.560
адже вони мають великий вплив на те,[br]як виглядає ваша сторінка.

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