Приклади html і css - як прибрати відступи html-елемента
Як прибрати відступи HTML-елемента. які браузери встановлюють за замовчуванням? З таким запитанням часто виникає у початківців верстальників, які хочуть прибрати подібні відступи у таких елементів, як
. HTML-таблиці (тег
) І їх осередки і т.д. Насправді немає нічого простішого, але спочатку давайте розберемося, а відступи ви маєте на увазі, коли шукаєте відповідь на це питання?
В CSS є два типи властивостей, які відповідають за відступи (CSS padding) і поля (CSS margin) елементів. Їх розташування показано на наступному зображенні:
Так ось, коли багато новачків говорять про те, що хочуть прибрати у елемента відступи, то насправді вони мають на увазі його поля, так як саме їх зазвичай додають браузери до деяких елементів. Ні, відступи, звичайно, теж додаються, але таких елементів дуже мало, наприклад, у тегів і
Трохи інакше йде справа у HTML-таблиць, так як у них є ще два параметри - це властивість CSS border-spacing. змінює відстань між кордонами або рамками осередків (яке теж можна назвати відступами) і CSS border-collapse. яке взагалі прибирає цю відстань і робить кордону загальними. На зображенні нижче показано розміщення всіх цих полів і відступів у таблиці.
На що тут треба звернути увагу. Ну, по-перше, для комірок таблиць не існує полів в звичайному розумінні, замість них використовується border-spacing. по-друге, у тега
є і поля, і відступи, як у звичайного HTML-елемента. Ну і, по-третє, відступ від внутрішнього краю таблиці до осередків складається з розміру внутрішнього відступу таблиці, до якого додається розмір відстані між осередками.
Ну що ж, а тепер, коли ви все це знаєте - розглянемо кілька прикладів.
Як прибрати відступи по краях HTML-сторінки
Приклад HTML і CSS: прибираємо відступи у тега BODY
опис прикладу
Як ви вже зрозуміли, у тега
браузери встановлюють не відступи, а зовнішні поля, які ми і прибрали. Заодно були прибрані поля у параграфа, щоб добре було видно, як текст прилягає до самого краю HTML-сторінки.
Як прибрати відступи у HTML-тегів UL і LI
Приклад HTML і CSS: прибираємо відступи у списку
опис прикладу
Для візуального оформлення списків, всі популярні браузери встановлюють поля і відступи у тега
. причому поля вони ставлять тільки зверху і знизу (як у параграфів), а внутрішній відступ тільки зліва, щоб відсунути вправо елементи списку. Однак для надійності поля і відступи були прибрані і у тега
. на той випадок, якщо якийсь браузер вирішить вести себе не так, як всі. До речі подібний підхід називається скиданням CSS. можете почитати.
Як прибрати відступи у таблиці
Приклад HTML і CSS: прибираємо відступи між осередками таблиці
опис прикладу
Для більшої наочності, до таблиць і комірок були додані рамки. До першої таблиці я не став застосовувати якісь спеціальні стилі, щоб ви побачили, що браузери за замовчуванням не додають таблицями ні поля, ні відступи, а тільки задають невелику відстань між осередками. Ось його ми і будемо прибирати.
До другої таблиці було застосовано властивість CSS border-collapse: collapse, щоб кордони у сусідніх осередків стали загальними. А ось у третій - відстань між осередками було просто обнулити, але їх межі (рамки) залишилися на своїх місцях, це дуже добре видно по характерному потовщення рамок. Природно насправді ніякого потовщення не відбулося, просто рамки в таблиці «прикипіли» один до одного.
Загалом, як бачите, обидва ці способи допомагають прибрати відступи в таблиці, просто роблять це трохи по-різному.
