Вертикальный отступ в html

Отступы и поля

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. CSS предоставляет полный контроль над этими параметрами.

CSS отступы

Отступы — это промежуток снаружи элемента за пределами любых установленных рамок.

В CSS есть свойства, позволяющие определять отступ для каждой стороны элемента:

Все свойства отступов могут принимать следующие значения:

• auto — значение отступа вычисляет браузер
• ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
• % — значение в процентах от ширины содержащего элемента
• inherit — указывает на то, что значение должно наследоваться от родительского элемента

Также, можно использовать отрицательные значения.

В следующем примере установим отступы для всех четырех сторон элемента

:

margin — Краткая форма записи

Чтобы уменьшить код, все свойства определения отступов можно объединить в одно свойство.

CSS свойство margin является короткой формой записи следующих свойств определения отступов:

Если у свойства margin определено четыре значения:

• margin: 25px 50px 75px 100px;
  • верхний отступ 25px
  • правый отступ 50px
  • нижний отступ 75px
  • левый отступ 100px

  Если у свойства margin определено три значения:

  • margin: 25px 50px 75px;
    • верхний отступ 25px
    • правый и левый отступы 50px
    • нижний отступ 75px

    Если у свойства margin определено два значения:

    • margin: 25px 50px;
      • верхний и нижний отступы 25px
      • правый и левый отступы 50px

      Если у свойства margin определено одно значение:

      Значение auto

      Чтобы горизонтально центрировать элемент внутри его контейнера, можно для свойства margin задать значение auto .

      В этом случае элемент займет заданную ширину, а оставшееся пространство будет поровну поделено между левым и правым отступами.

      Значение inherit

      В следующем примере значение левого отступа элемента

      наследуется от родительского элемента ():

      Схлопывание отступов

      Верхний и нижний отступы элементов иногда схлопываются в один отступ, который будет равен самому большому из этих двух отступов.

      Это происходит только с верхними и нижними отступами и не случается с левыми и правыми отступами!

      Посмотрите на следующий пример:

      Здесь у элемента нижний отступ установлен в 50px, а у элемента верхний отступ установлен в 20px.

      Логика подсказывает, что вертикальный отступ между элементами и должен быть 70px (50px + 20px). Однако из-за схлопывания отступов действительный вертикальный отступ между этими элементами будет 50px.

      CSS поля

      Поля — это промежуток вокруг содержимого элемента внутри любых установленных рамок.

      В CSS есть свойства, позволяющие определять поле для каждой стороны элемента:

      Все свойства полей могут принимать следующие значения:

      • ширина — значение в единицах измерения длины (px, pt, cm и т.д.)
      • % — значение в процентах от ширины содержащего элемента
      • inherit — указывает на то, что значение должно наследоваться от родительского элемента

      Внимание! Отрицательные значения не допустимы.

      В следующем примере установим поля для всех четырех сторон элемента :

      padding — Краткая форма записи

      Чтобы уменьшить код, все свойства определения полей можно объединить в одно свойство.

      CSS свойство padding является короткой формой записи следующих свойств определения полей:

      Если у свойства padding определено четыре значения:

      • padding: 25px 50px 75px 100px;
        • верхнее поле 25px
        • правое поле 50px
        • нижнее поле 75px
        • левое поле 100px

        Если у свойства padding определено три значения:

        • padding: 25px 50px 75px;
          • верхнее поле 25px
          • правое и левое поля 50px
          • нижнее поле 75px

          Если у свойства padding определено два значения:

          Если у свойства padding определено одно значение:

          Ширина полей и элемента

          CSS свойство width определяет ширину области с содержимым элемента. Область с содержимым — это пространство внутри полей, рамок и отступов элемента (блочная модель).

          Таким образом, если у элемента задана ширина, то поля будут добавляться к общей ширине элемента. Это часто приводит к нежелательным результатам.

          В следующем примере для элемента устанавливается ширина в 300px. Однако реальная ширина элемента будет 350px (300px + 25px левого поля + 25px правого поля):

          Чтобы ширина была 300px без учета полей, можно использовать свойство box-sizing . Это будет определять реальную ширину элемента — если ширина полей будет увеличиваться, доступное пространство содержимого будет уменьшаться.

          В своем файле таблиц стилей измените код CSS для тега следующим образом:

          Вы увидите, что заголовки второго уровня отодвинутся от соседних элементов. В данном примере используется краткая форма записи свойств отступов и полей.

          Все CSS свойства определения отступов и полей

          Свойство	Описание
          margin	Короткое свойство, определяющее размер всех отступов элемента за одну декларацию
          margin-bottom	Определяет размер нижнего отступа элемента
          margin-left	Определяет размер левого отступа элемента
          margin-right	Определяет размер правого отступа элемента
          margin-top	Определяет размер верхнего отступа элемента
          padding	Короткое свойство, определяющее размер всех полей элемента за одну декларацию
          padding-bottom	Определяет размер нижнего поля элемента
          padding-left	Определяет размер левого поля элемента
          padding-right	Определяет размер правого поля элемента
          padding-top	Определяет размер верхнего поля элемента

          Источник

          Как в html сделать отступ текста?

          

          Рассмотрим несколько способов как сделать отступ текста в HTML.

          Навигация по статье:

          

          Отступ текста в HTML при помощи margin

          Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока , тег таблицы , абзаца , секции и так далее.

          Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

          Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

          

          Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
          «Как определить ID и класс элемента на странице?»

          При помощи этого свойства мы можем задать разные отступы тексту в HTML:

          • margin-left — расстояние слева
          • margin-right — расстояние справа
          • margin-top — расстояние сверху
          • margin-bottom — расстояние снизу

          Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

          • margin: 10px; — делаем отступ текста 10px со всех сторон
          • margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
          • margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

          Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

          Отступ текста в HTML при помощи padding

          Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

          Источник

          Вертикальные отступы или ещё раз про margin

          По мотивам недавней статьи «Расстановка полей и отступов в CSS». Предлагаю дополнения по данному вопросу. Предполагается, что читатель в курсе что есть margin , и что такое Margin collapsing.

          

          Помощь родителю

          Отступы необходимо формировать за счёт самого элемента, а не его содержания, т.е. не стоит обеспечивать отступ между соседними блоками за счёт отступов их дочерних элементов.

          

          Margin для padding

          Как следствие предыдущего пункта, margin первого и последнего элементов вертикального списка должны быть нулевыми, ибо зачем? Если нужен отступ от внешних границ родителя, используем padding для родителя.

          

          Mixin для вертикального списка

          Для реализации всего вышеописанного вам понадобиться хелпер для расстановки margin с использованием нативного not() , например такой.

          // Scss @mixin ritm($valueTop, $valueBottom:$valueTop) < @if $valueTop != 0 < @include not(':first-child') < margin-top: $valueTop; >> @if $valueBottom != 0 < @include not(':last-child') < margin-bottom: $valueBottom; >> > 

          Пользовательский контент

          Пользовательский контент, в классическом понимании, состоит из параграфов, списков, изображений и т.п. Всё это образует условный вертикальный список (практически однородных) элементов. Все вышеперечисленные правила применяйте и для компонентов UGC .

          Более того, явное указание вертикальных margin для элементов UGC, позволяет производить перестановки элементов контента без вреда для конечного результата.

          Margin и Box-model

          Стоит сделать оговорку, что margin является неотъемлемой частью блока, хоть и воспринимается как нечто попутное. Важно понимать, что размеры блока, а конкретно его ширина, не всегда одно и тоже, что значение свойства width. Width — это ширина части бокса от border до border, либо размер контентной области в зависимости от боксовой модели. При смене боксовой модели (border-box / content-box), width может меняться, а размеры блока при этом остаются неизменные.

          

          В ней у каждого бокса есть 4 области: margin (внешние отступы), border (рамка), padding (внутренние поля), и content (контент или содержимое).

          Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas;

          Тонкости перевода, холивара ради:

          — граница блока ≠ border блока, бордер — это border согласно спецификации, а граница блока — это граница/край блока
          — block area = область блока (читай размеры блока), но
          — block area ≠ область ограниченная border’ом.

          Честно говоря, наука-наукой, а ежедневная работа вносит свои правки в лексикон разработчиков.

          PS. Данные дополнения мной были предложены в комментариях к вышеупомянутой статье, но строгий НЛО вырезал все теги по причине ограниченных прав.

          Источник

          Читайте также:  Length in java script