Отступ текста css сверху: margin-top | htmlbook.ru

Leave a Comment / Css / By /

Отступы | рамки и выделение

Стандарт CSS предлагает средства для создания отступов двух видов.

1. Отступ между воображаемой границей элемента Web-страницы и его содержимым — внутренний отступ. Такой отступ принадлежит данному элементу Web-страницы, находится внутри его.

2. Отступ между воображаемой границей данного элемента Web-страницы и воображаемыми границами соседних элементов Web-страницы — внешний отступ. Такой отступ не принадлежит данному элементу Web-страницы, находится вне его.

Чтобы лучше понять разницу между внутренним и внешним отступами, давайте рассмотрим ячейку таблицы. Ячейка наполнена содержимым, скажем, текстом, имеет воображаемую границу и окружена другими ячейками.

— Внутренний отступ — это отступ между границей ячейки и содержащимся в ней текстом.

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

Атрибуты стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента Web-страницы:

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

<отступ>|auto|inherit

Мы можем указать в качестве величины отступа абсолютное или относительное значение. Значение auto задает величину отступа по умолчанию, обычно оно равно нулю.

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

А вот стиль, создающий внутренние отступы, равные двум сантиметрам слева и справа:

.indented { padding-left: 2cm;
padding-right: 2cm }

Мы можем привязать такой стиль к абзацу и посмотреть, что получится.

Атрибут стиля padding позволяет сразу указать величины внутренних отступов со всех сторон элемента Web-страницы:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

— Если указано одно значение, оно задаст величину отступа со всех сторон элемента Web-страницы.

— Если указаны два значения, первое установит величину отступа сверху и снизу, а второе — слева и справа.

— Если указаны три значения, первое определит величину отступа сверху, второе — слева и справа, а третье — снизу.

— Если указаны четыре значения, первое задаст величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Пример:

TD, TH { padding: 2px }
.indented { padding: 0cm 2cm 0cm 2cm }

Здесь мы просто переписали определения приведенных ранее стилей с использованием атрибута стиля padding.

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-left|margin-top|margin-right|margin-bottom: <отступ>|auto|inherit

Здесь также доступны абсолютные и относительные значения. Значение auto задает величину отступа по умолчанию, как правило, равное нулю.

Пример:

h2 { margin-top: 5mm }

Этот стиль создаст у всех заголовков первого уровня отступ сверху 5 мм.

В качестве значений внешних отступов допустимы отрицательные величины:

UL { margin-left: -20px }

В этом случае Web-обозреватель создаст «отрицательный» отступ. Такой прием позволяет убрать отступы, создаваемые Web-обозревателем по умолчанию, например, отступы слева у больших цитат и списков.

Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента Web-страницы:

margin: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Этот атрибут стиля ведет себя так же, как его «коллега» padding.

Пример:

h2 { margin: 5mm 0mm }

Однако мы не можем использовать атрибуты стиля margin-left, margin-top, margin-right, margin-bottom и margin для задания внешних отступов у ячеек таблиц (т. е. расстояния между ячейками) — они просто не будут действовать. Вместо этого следует применить атрибут стиля border-spacing:

border-spacing: <отступ 1> [<отступ 2>]

Отступы могут быть заданы только в виде абсолютных значений.

— Если указано одно значение, оно задаст величину отступа со всех сторон ячейки таблицы.

— Если указаны два значения, первое задаст величину отступа слева и справа, а второе — сверху и снизу.

Атрибут стиля применяется только к таблицам (тегу <TABLE>):

TABLE { border-spacing: 1px }

Здесь мы задали отступы между ячейками таблицы, равные одному пикселу.

ВНИМАНИЕ!

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

Также нужно знать, что при применении отступов к элементу Web-страницы с размерами, заданными в виде относительных величин, Web-обозреватель сначала вычисляет абсолютный размер элемента, а потом к нему добавляет величины отступов. Так, если мы зададим ширину контейнера в 100%, а потом укажем для него отступы, то Web-обозреватель сначала вычислит его абсолютную ширину, основываясь на размерах окна Web-обозревателя, а потом прибавит к ней величину отступов.

В результате ширина контейнера станет больше, чем ширина окна Web-обозревателя, и в окне появятся полосы прокрутки. Весьма неприятный сюрприз…

Вёрстка слева направо и сверху вниз

Модули в вёрстке обычно идут друг за другом и имеют внешние отступы. В ЦСС внешние отступы задают свойством margin:

.module {
  margin-left: 9px;
  margin-top: 18px;
  margin-bottom: 27px;
  margin-right: 9px;
}

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

Иногда в отступах нет системы, их задают так, как удобнее в конкретный момент для конкретного модуля. Один модуль может иметь отступы в одну сторону, другой — в другую, а то и сразу в несколько сторон:

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

.textBox {
  margin-top: 27px;
}
.textBox p {
  margin-top: 9px;
  margin-bottom: 9px;
}
. textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-left: 4.5px;
  margin-right: 4.5px;
}

Когда в отступах нет системы, вёрстку становится сложнее понимать, поддерживать и развивать. Работу кода трудно представить без подглядывания в браузер. Новые модули слипаются с существующими, приходится каждый раз подкручивать отступы, чтобы всё работало как надо. Начинается путаница, появляются баги.

Правило: слева направо, сверху вниз

Я советую всегда выстраивать модули слева направо и сверху вниз, а отступы задавать соответственно этим направлениям: все вертикальные отступы делать через нижний отступ, все горизонтальные — через правый отступ:

.textBox {
  margin-bottom: 27px;
}
.textBox p {
  margin-bottom: 9px;
}
.textBox ul {
  margin-bottom: 18px;
}
.nav a {
  margin-right: 9px;
}

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

Отступы только для последних элементов

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

Обычно ненужные отступы последних модулей убирают в два шага. Сначала задают отступы для всех модулей, а затем обнуляют у последнего:

ul li {
  margin-bottom: 9px;
}
ul li:last-child {
  margin-bottom: 0;
}

Удобнее и проще использовать :not в комбинации с :last-child. Результат будет такой же, а кода станет меньше:

ul li:not(:last-child) {
  margin-bottom: 9px;
}

Исключения

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

Ещё одно исключение: если направление чтения сайта отличается от привычного. Тогда может быть удобнее изменить и направления построения вёрстки и отступов.

О тупых правилах

В целом, правило «слева направо, сверху вниз» можно использовать как «тупое правило» — то есть просто соблюдать всегда. Потому что когда вы столкнётесь с ситуацией‑исключением, то сами сразу это поймёте.

О тупых правилах

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

CSS | padding-top Property — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 04 Авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Отступы — это пространство между содержимым и границей. Свойство padding-top в CSS используется для установки ширины области заполнения в верхней части элемента.

    Синтаксис: 

     padding-top: длина|процент|начальный|наследовать;

    Значения свойств:

    • длина: Этот режим используется для указания фиксированного размера заполнения. Размер может быть установлен в виде пикселей, см и т. д. Значение по умолчанию равно 0. Оно должно быть неотрицательным.

    Синтаксис: 

     padding-top: длина;

    Пример:  

    html

    < html

    5 >

         < head >

             < title >

                 padding-top Property

             title >

             

             < стиль >

    4

                 . geek {

                     padding-top: 100px;

                     ширина: 50%;

                     font-size:18px;

                     граница: 1 пиксель сплошной черный;

                        }

             стиль 3 > 0054      head >

          

         < body >

             < h3 >

                 padding- top Свойство

             h3 >

              

    		 0055

    < P Class = "Geek">

    Этот пункт имеет накладную: 100PX;

             p >

         body >

    html >                    

    Вывод:

     

    • процент: Этот режим используется для установки верхнего отступа в процентах от ширины элемента. Оно должно быть неотрицательным.

    Syntax: 

     padding-top: percentage (%)

    Example:  

    html

    < html >

         < head >

             < title >

                 padding-top Property

             title >

              

             < стиль >

           9 0      0055 . geek {

                     padding-top: 10%;

                     ширина: 50%;

                     font-size:18px;

                     граница: 1 пиксель сплошной черный;

    }

    Стиль >

    1 head >

          

         < body >

             < h3 >

                 padding-top Property

    h3 >

              

            

     5 4 056 < p class = "geek">

                 Этот абзац имеет padding-top: 10%;

             p >

         body >

    html >                    

    Output:

     

    • начальный: Используется для установки свойства padding-top в значение по умолчанию.

    Синтаксис: 

     padding-top: initial;

    Example:  

    html

    < html >

         < head >

             < title >

                 padding-top Property

             title >

              

             < style >

                 . geek {

                           padding-top: initial;

                     ширина:50%;

                     font-size:18px;

                     граница: 1 пиксель сплошной черный;

    }

    .0056 < body >

             < h3 >

                 padding-top Property

             h3 >

    < P Class = "Geek">

    Этот абзац имеет padding-top: initial;

             p >

         body >

    html >                    

    Output:

     

    • inherit: Используется для наследования свойства padding-top от родительского элемента.

    Supported Browsers: The browser supported by padding-top property are listed below:

    • Google Chrome 1.0
    • Edge 12.0
    • Internet Explorer 4.0
    • Firefox 1.0
    • Safari 1.0
    • Opera 3.5

    Связанные статьи

    padding-top - CSS: каскадные таблицы стилей

    Свойство CSS padding-top задает высоту области заполнения в верхней части элемента.

    Область заполнения элемента — это пространство между его содержимым и его границей.

    Примечание: Свойство padding можно использовать для установки отступов со всех четырех сторон элемента с помощью одного объявления.

     /* <длина> значений */
обивка сверху: 0,5 см;
padding-top: 0;
обивка-верх: 2см;
/* <процентное> значение */
обивка верха: 10%;
/* Глобальные значения */
padding-top: наследовать;
padding-top: начальный;
padding-top: вернуться;
padding-top: возвратный слой;
padding-top: не установлено;

    Свойство padding-top указывается как одно значение, выбранное из списка ниже.

    В отличие от полей, отрицательные значения не допускаются для заполнения.

    Значения

    <длина>

    Размер отступа как фиксированное значение. Должен быть неотрицательным.

    <процент>

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

    Initial value 0
    Applies to all elements, except table-row-group , table-header-group , table-footer-group , table -строка , таблица-столбец-группа и таблица-столбец . Это также относится к ::first-letter и :: первая строка .
    Inherited no
    Percentages refer to the width of the containing block
    Computed value the percentage as specified or the absolute length
    Animation type a length
     padding-top = 
     <процент длины [0,∞]> 
     "><процент длины> = 
     <длина> |

    Установка верхнего отступа с использованием пикселей и процентов 

     .
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *