Як зробити відступ в HTML — це одне з найчастіших запитань під час верстки сторінок. У самій HTML-розмітці відступи задають рідко, бо в більшості випадків для цього використовують CSS: так простіше керувати інтервалами, вирівнюванням і однаковим виглядом сторінки.
Що саме мають на увазі під відступом
Під словом «відступ» можуть мати на увазі різні речі:
- внутрішній відступ — простір всередині блоку між контентом і краєм;
- зовнішній відступ — простір між одним елементом і іншим;
- відступ першого рядка — коли абзац починається трохи правіше.
Для кожного випадку є свій інструмент у CSS. Саме тому важливо не плутати margin, padding і text-indent.
Внутрішній відступ: padding
Якщо потрібно, щоб текст не прилипав до країв блока, використовуйте padding. Це найкращий варіант для карток, кнопок, блоків із фоном і контейнерів.
.box { padding: 20px; }Такий код додає однаковий внутрішній простір з усіх боків. Якщо треба задати різні значення, можна вказати їх окремо:
.box { padding: 10px 20px 15px 20px; }У практиці це зручно для сторінок, де контент має виглядати акуратно й не «липнути» до рамки.
Зовнішній відступ: margin
Margin використовують, коли потрібно розділити елементи між собою. Наприклад, додати простір між заголовком і абзацом або між двома блоками.
.title { margin-bottom: 12px; }Цей підхід особливо корисний у статтях, формах і списках. Якщо ви шукаєте, як зробити відступ в html між елементами, найімовірніше, вам потрібен саме margin.
Відступ першого рядка тексту
Коли потрібно стилізувати абзац як у класичному друкованому тексті, застосовують text-indent:
p { text-indent: 24px; }Це створює відступ лише для першого рядка абзацу. Важливо: такий ефект не замінює padding чи margin, бо працює тільки з текстовим блоком.
Чого краще не робити
Початківці часто намагаються зробити відступ через пробіли або символи табуляції в HTML. Це поганий підхід, тому що браузер може ігнорувати зайві пробіли, а верстка стане нестабільною.
Також не варто використовувати старі HTML-атрибути для оформлення, якщо є CSS. Сучасна верстка має бути гнучкою, а стилі — винесеними окремо від розмітки.
Що обрати на практиці
- Для простору всередині блока — padding.
- Для відстані між блоками — margin.
- Для першого рядка абзацу — text-indent.
Якщо коротко, відповідь на питання, як зробити відступ в html, майже завжди зводиться до CSS. Це найчистіший і найнадійніший спосіб керувати зовнішнім виглядом сторінки без хаосу в коді.
