CSS: Внутрішні відступи

Розглядаючи різні блоки, які були створені протягом усіх уроків, можна помітити, що текст «прилипає» до країв блоків. Наприклад:

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

Для створення внутрішніх відступів використовується 4 правила:

• padding-top - внутрішній відступ зверху
• padding-right - внутрішній відступ праворуч
• padding-bottom - внутрішній відступ знизу
• padding-left - внутрішній відступ зліва

Кожна властивість приймає числове значення та одиницю вимірювання, наприклад, пікселі

Скорочена властивість

Якщо потрібно встановити відступи з усіх боків, то використовують не 4 різних властивості, а одне - padding. Воно є скороченням від відомих властивостей і дозволяє встановити:

• відступ зверху
• відступ праворуч
• відступ знизу
• відступ зліва

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

Крім такого запису для зручності існують скорочені записи цих правил:

• Якщо вказати лише одне значення, воно буде використано одночасно для всіх сторін
• Якщо вказати два значення, то перше буде використовуватися для відступів по вертикалі (згори та знизу), а друге по горизонталі (праворуч і ліворуч)
• Якщо вказати три значення, то вони будуть використовуватися для відступу зверху, по горизонталі та знизу

Завдання

Додайте в редактор параграф із класом padding та встановіть внутрішні відступи:

• 10 пікселів зверху
• 15 пікселів знизу
• 20 пікселів зліва та справа

Використовуйте наступний текст для параграфа:

Що робить верстальник? Створює сторінки за допомогою HTML і CSS. Верстає адаптивні проекти

Сам текст не має значення та не перевіряється. Основна мета – додати текст, який буде розташований у декілька рядків.

Додайте чорний фон до параграфа та білий колір тексту.

Стилі запишіть у тезі

Якщо ви зайшли в глухий кут, то саме час поставити питання в «Обговореннях».

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

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

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

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

Створювати навчальні матеріали, зрозумілі всім без винятку, досить складно.Якщо ви зустріли матеріал, який вам незрозумілий, напишіть проблему в «Обговореннях». Ідеально, якщо ви сформулюєте незрозумілі моменти як запитань. Зазвичай, нам потрібно кілька днів для внесення правок.

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

css відступи на прикладах

Запитання: звідки з'являються відступи від країв? Я думав div повинен займати всю ширину.

Мені вдалося видалити всі відступи, вказавши body margin: 0. Але чому margin, а не padding? Адже margin це відступ між елементами, а body – єдиний елемент. Логічне було б padding: 0.

1. Чому зник відступ (який з'явився в 3-му пункті) і чому padding top і left відрізняються? Адже у тега р padding зазначено inherit?

4 відповіді 4

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

1. Ви напевно помічали, що будь-які офіційні документи мають відступи від країв, у тому самому Word чи під час виведення на друк? Це робиться для зручності читання, текст на краю виглядає дуже погано. Тому роблять відступ від країв документа.
2. Margin – це насамперед відступ від краю елемента до нього самого. А padding від кордону до контенту, тому не забувайте про межі border(!). Тому логічно, що цей відступ оформлений через margin, оскільки це правило прийшло з оформлення документів.

Зауважте, що цей відступ дає браузер як "user agent stylesheet" і різні браузери можуть давати різні відступи, розміри та інше, що явно не вказано в документації.

1. Це ефект схлопування кордонів. Якщо у внутрішнього елемента margin більше, ніж у зовнішнього, вони обидва відсуваються від верхньої межі на величину внутрішнього елемента. p від 16 і тому загальний margin стає дорівнює 16 т.к. 16> 8 і береться більший. Причому тема схлопування досить специфічна, наприклад, при додаванні тексту, кордонів, відступів схлопування пропадає.

1. Знову ж таки виходячи з пункту 3 і ефекту схлопування пропадає. Ну і ще є відступи у самого

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

У 3 прикладі ви не маєте рації. що що ви показуєте як 16 пікселів на малюнку, насправді 32. Що стосується відступів у 4 подивіться Моя відповідь. І доповніть ваш, тому що його швидше за все приймуть.

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

Для того щоб це прибрати існують reset.css або normalize.css ними бажано користуватися, вони прибирають відступи які не потрібні і залишають ті, що потрібні. Наприклад у body є свій відступ який дорівнює 20px він загалом нікому не потрібен, крім рідкісних випадків. Так само є відступи margin у таких елементів як h1, p - часто грамотний дизайнер знає який відступ у цих елементів і малює виходячи з цього.

1. Саме так.div займає всю ширину body. Саме це ви й бачите. Відступи безпосередньо пов'язані з другим питанням.
2. margin тому що це зовнішній відступ від тега html .
3. Тому що у тега p є margin , проте за замовчуванням div має overflow: visible , що дозволяє margin тега p виходить за межі div , тому що немає меж які його обмежуватимуть, виправити це можна або відповіддю з 4 питання (НЕ рекомендується), або додаванням overflow: auto або overflow: hidden в залежності від того, що ви хочете отримати.
4. padding-top і padding-left не відрізняються, вони обидва досі рівні 10, але у Вас все ще є margin. Щодо того, чому зник відступ зверху. Оскільки padding > 1 unit (будь-які одиниці виміру), трохи змінить поведінку overflow: visible . Якщо раніше margin, тега p нічого не обмежувало, то тепер є padding у батьківського div. Тому тепер стилі перемальовуються з цією умовою.

звідки з'являються відступи від країв?

Body за замовчуванням margin: 8px .

Але чому margin, а не padding?

Тому що так заведено. Якщо ти йому position: relative пропишеш, то absolute з нулем встане по цьому відступу, а по паддінг не встав би:

Чому додається відступ зверху div-а, при додаванні до нього

Це називається margin collapse (схлопування марджинів). Пропоную почитати окремо.

Чому зник відступ (який з'явився у 3-му пункті)

Теж margin collapse, тільки цього разу відступи не хлопаються.

чому padding top та left відрізняються?

Вони не відрізняються, ти просто забув про margin: 1em 0 за замовчуванням p .

Вивчаємо поля та відступи в CSS на прикладі чотирьох HTML-елементів

HTML-властивість margin використовується для додавання відступу чи розриву між різними елементами.Властивість padding використовується для додавання простору між вмістом та межею (рамкою) зазначеного HTML-елемента.

Оновлено: 2024-10-16 17:56:12 Вадим Дворніков автор матеріалу

Відступи в CSS - cінтаксис CSS-властивостей padding і margin

Синтаксис, який використовується для одиничного оголошення властивості CSS margin:

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

margin: 10px 20px 50px 100px;

• 10px - відступ зверху CSS;
• 20px - відступ праворуч CSS;
• 30px - відступ знизу CSS;
• 40px - відступ ліворуч CSS.

Також можна встановити відступ ліворуч CSS та інші напрямки окремо:

margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;

Примітка: Можна використовувати для визначення відступу px, pts, cm і т.д.

Синтаксис CSS-властивості padding

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

Одиничне оголошення з одним значенням:

Для кожного напрямку поодиноким оголошенням:

padding: 10px 20px 50px 100px;

Якщо вказано чотири значення, то порядок їхнього слідування такий самий, як і для властивості HTML CSS margin .

Для кожного напряму окремо:

padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

Padding в CSS - це властивість, що задає внутрішні відступи від меж елемента до його вмісту.

Приклад для встановлення полів та відступів у HTML-списку

У вступній частині я показав властивості margin та padding, що використовуються в елементі div. У цій демо-версії я створив список за допомогою пунктів меню, які є посиланнями.Список розміщується всередині елемента div. Він містить пункти меню як гіперпосилань.

Список задається й іншими властивостями CSS, але без використання властивостей HTML margin і padding він виглядатиме так:

Переглянути демо-версію та код

ми отримаємо такий вигляд:

Властивість CSS margin auto центрує елемент на сторінці.

Переглянути онлайн демо-версію та код

Властивість padding додала простір між вмістом та кордоном кожного посилання. Вкажіть відступ величиною 2 пікселя в класі посилання, і отримайте наступний вигляд:

Переглянути онлайн демо-версію та код

padding: 10px; margin: 2px; text-decoration: none; color: #fff; background-color: #DA8119; display:block;

Демонстрація полів на прикладі HTML-таблиці

Нижче наводиться приклад використання властивості padding у HTML-таблиці. Я створив таблицю з кількома рядками.

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

Переглянути демо-версію та код

Додавши поля, ми отримаємо таблицю, яка виглядатиме так:

Для налаштування відступу між рядками CSS використовується властивість line-height.

Переглянути демо-версію та код

padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;

Приклад використання полів та відступів з елементом form

Властивості margin padding HTML можна також застосовувати для елементів форми: текстових полів, кнопок і т.д.

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

Щоб стало зрозуміліше, я створю форму та покажу різницю між полями з використанням властивостей margin та padding та без. Початковий зовнішній вигляд форми без застосування властивостей margin та padding:

Додавши поля до класу текстових полів і класу кнопки btn, ми отримаємо форму, яка виглядає так:

Поля для текстових полів:

Переглянути демо-версію та код

Щоб збільшити або зменшити відступи між текстовими полями, використовуйте HTML CSS margin . У цій демо-версії я використовував негативне значення зменшення відстані між полями.

Поля форми виглядатимуть так:

Переглянути демо-версію та код

Після використання негативного значення HTML margin відстань між текстовими полями зменшилася на 3 пікселя.

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

Для кнопки "Save" ми також застосували властивість padding:

яке використовується для вирівнювання тексту у всіх напрямках.