Верхнее поле в html

Поля и отступы.

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

Давайте разберемся в этих понятиях..

Поле ( margin ) — Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.

Отступом ( padding ) — Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром ( border ) про него тоже не следует забывать.

Расстояния margin и padding указываются:

• px — В пикселях или любых других допустимых CSS единицах измерения.
• % — В процентах.
• auto — Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков и свойств CSS.

Попробуйте поменять значения свойств margin и padding и Вы поймете, что к чему.. а если и так понятно идем дальше..

Возможные значения margin и padding.

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

margin: 5px 40px; — два значения.
Первое значение — Устанавливает поля от верхней и нижней границ.
Второе значение — Устанавливает поля от левой и правой границ элемента.

margin: 5px 40px 20px; — три значения.
Первое значение — Устанавливает поле от верхней границы элемента.
Второе значение — Устанавливает поля от левой и правой границ элемента.
Третье значение — Устанавливает поле от нижней границы элемента.

margin: 5px 40px 20px 1px; — четыре значения.
Первое значение — Устанавливает поле от верхней границы элемента.
Второе значение — Устанавливает поле от правой границы элемента.
Третье значение — Устанавливает поле от нижней границы элемента.
Четвёртое значение — Устанавливает поле от левой границы элемента.

С padding дело происходит по тому же принципу, как и с margin , отступы от внутренних границ элемента до содержания приобретают размеры в зависимости от количества аргументов и их значений.

Дочерние свойства margin и padding.

Свойства CSS margin и padding являются базовыми и имеют ряд дочерних свойств.

• margin-top — Поле от верхней границы элемента родителя,
• margin-left — Поле от левой границы элемента родителя,
• margin-right — Поле от правой границы элемента родителя,
• margin-bottom — Поле от нижней границы элемента родителя.

И у padding соответственно:

• padding-top — Отступ от верхней границы элемента до его содержания,
• padding-left — Отступ от левой границы элемента до его содержания,
• padding-right — Отступ от правой границы элемента до его содержания,
• padding-bottom — Отступ от нижней границы элемента до его содержания.

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

Полезные советы:

Поля и отступы являются одними из основных составляющих дизайна сайта, по этому поводу следует придерживаться нескольких рекомендаций.

Избегайте коротких, и уж тем более, нулевых отступов от содержимого к границам элемента, особенно это касается текстовых блоков. Текст с маленькими полями и отступами читается трудно и «вязко».

Соблюдайте правила пропорциональности и соизмеримости полей и отступов как для отдельно взятого элемента, так и для всей страницы (композиции элементов) целиком.

Один из способов акцентирования внимания посетителя страницы на нужном Вам месте — это отступы размером больше обычного, такой контраст заставит зрителя смотреть и проявить внимание к «особым» местам в тексте..

Источник

CSS справочник | margin или внешнее поле

— oпределяет ширину поля за пределами границы элемента:

margin: margin-top | margin-right | margin-bottom | margin-left

margin: 25px 30px 40px 80px → указаны ширины внешних полей (по часовой стрелке:

верхнее, правое, нижнее, левое) ;

margin: 0 auto → позволяет расположить блок по центру.

— верхнее внешнее поле элемента:

margin-top: 20px → величина может быть указана в пикселях или в процентах.

— определяет ширину правого внешнего поля:

— определяют соответственно нижнее и левое внешнее поле.

CSS padding или внутреннее поле

— определяет ширину полей между границей элемента и его содержимым:

padding: padding-top | padding-right | padding-bottom | padding-left

— определяет верхнее внутреннее поле элемента:

padding-right | padding-bottom | padding-left

— соответственно правое, нижнее и левое внутреннее поле.

CSS размеры элементов страницы

— атрибут, определяющий ширину элемента:

— атрибут, определяющий высоту элемента

страницы в пикселях или в процентах:

Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS справочник | border CSS margin, padding CSS справочник | position

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Внутренние и внешние поля? – Не вопрос!

Источник

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

Чтобы различные элементы визуально отделялись друг от друга, у них есть особые параметры — отступы и поля. 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	Определяет размер верхнего поля элемента

          Источник