padding-left в CSS


Содержание

padding-left

Свойство CSS padding-left используется для указания размера левого внутреннего отступа элемента, который находится между левой границей его рамки (CSS border-left) и содержимым. В отличие от левого внешнего поля (CSS margin-left), цвет отступа всегда такой же, как фон элемента.

Расположение левого внутреннего отступа элемента — padding-left.

Если необходимо указать внутренние отступы стразу со всех сторон элемента, то можно использовать свойство padding.

Тип свойства

Применяется: ко всем элементам, кроме тегов , , , , , и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row.

Если к тегу будет примененно свойство CSS border-collapse:collapse, то padding-left будет проигнорирован.

Значения

Значением свойства CSS padding-left является указание размеров левого отступа одним из следующих способов.

  • Размер — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения запрещены.
  • Проценты — расстояние в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (CSS position: static или relative ) расчет левого отступа идет относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширины тела документа (тег ).
    2. Процентный размер левого отступа самого тела документа считается относительно ширины корневого элемента (тег ).
    3. Для элементов с position: fixed отступ считается относительно ширины окна браузера.
    4. Для элементов с position: absolute отступ считается относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов, а если такого элемента нет, то относительно ширины окна браузера.

    Допускается указывать отрицательные процентные значения.

  • inherit — наследует значение свойства padding-left от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: 0.

Синтаксис

Пример CSS: использование padding-left

Результат. Использование свойства CSS padding-left.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а также не поддерживают padding-left для тега .

padding-left

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Задаем левое поле для элемента p:

Описание и использование

Свойство padding-left задает левое поле для элемента.

Примечание: негативные значения не разрешены.

Remove left padding css

I am trying to create a simple fixed navigation bar, but there is a white margin/padding down the left of the computer screen that I can’t figure out how to get rid of.

4 Answers 4

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

So, You can Reset/Normalize your css by adding this code:

CSS padding-left Свойство

Пример

Установите левое заполнение для элемента

Подробнее примеры ниже.

Определение и использование

Заполнение элемента — это пространство между его содержимым и его границей.

Свойство padding-left задает левое заполнение (пробел) элемента.

Примечание: Отрицательные значения не допускаются.

Значение по умолчанию:
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.paddingLeft=»50px»

Поддержка браузера

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

padding-left

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)1
Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/box.ШТМЛ#propdef-padding-left

Описание

Устанавливает значение поля от левого края содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Рис. 1. Поле слева от контента

Синтаксис

padding-left: значение | auto

Аргументы

Величину левого поля можно указывать в пикселах (px), процентах (%) или других допустимых для CSS (ЦСС) единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 2.

padding-left

Свойство CSS padding-left используется для указания размера левого внутреннего отступа элемента, который находится между левой границей его рамки (CSS border-left) и содержимым. В отличие от левого внешнего поля (CSS margin-left), цвет отступа всегда такой же, как фон элемента.

Расположение левого внутреннего отступа элемента — padding-left.

Если необходимо указать внутренние отступы стразу со всех сторон элемента, то можно использовать свойство padding.

Тип свойства

Применяется: ко всем элементам, кроме тегов , , , , , и элементов с display равным table-column, table-column-group, table-header-group, table-footer-group, table-row-group, table-row.

Если к тегу будет примененно свойство CSS border-collapse:collapse, то padding-left будет проигнорирован.

Значения

Значением свойства CSS padding-left является указание размеров левого отступа одним из следующих способов.

  • Размер — расстояние в относительных или абсолютных единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения запрещены.
  • Проценты — расстояние в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
    1. Для непозиционируемых и относительно позиционируемых элементов (CSS position: static или relative ) расчет левого отступа идет относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то ширины тела документа (тег ).
    2. Процентный размер левого отступа самого тела документа считается относительно ширины корневого элемента (тег ).
    3. Для элементов с position: fixed отступ считается относительно ширины окна браузера.
    4. Для элементов с position: absolute отступ считается относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов, а если такого элемента нет, то относительно ширины окна браузера.

    Допускается указывать отрицательные процентные значения.

  • inherit — наследует значение свойства padding-left от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: 0.

Синтаксис

Пример CSS: использование padding-left

Результат. Использование свойства CSS padding-left.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Да Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit , а также не поддерживают padding-left для тега .

CSS Свойство padding-left

Пример

Установить левый отступ для элемента p:

p
<
padding-left:2cm;
>

Попробуйте сами »

Определение и Использование

Свойство padding-left устанавливает левый отступ элемента.

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

Значение по умолчанию:
Наследуется: нет
Версия: CSS1
JavaScript синтаксис: объект.style.paddingLeft=»2cm»

Поддержка Браузерами

Свойство padding-left поддерживается всеми основными браузерами.

Замечание: Значение «inherit» не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает «inherit».

CSS стиль padding-left. Установка поля слева с помощью padding-left

Краткая информация по CSS-свойству padding-left

Значение по умолчанию
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства padding-left

Величину левого поля можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах.

Объектная модель

Пример применения стиля padding-left

Проиллюстрируем работу padding-left на примере. Нам нужно, чтобы поле слева было больше, чем с других сторон. Это необходимо, чтобы текст не залезал на фоновый рисунок.

Применение свойства padding-left

Вместо того, чтобы писать padding: 5px; , а потом padding-left: 90px; нам бы следовало написать padding: 5px 5px 5px 90px; . Так намного короче и показывает более высокий уровень верстки.

CSS padding-left

The CSS padding-left property is used to apply padding to the left side of an element.

Syntax

Possible Values

CSS3 proposes to remove percentages as a possible padding value. It also proposes negative values as well as an auto value. However, this spec is in draft status at the time of writing, so these may or may be included in the official spec.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

CSS3 states that this property applies to all elements. However, CSS2 states all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column .

Inherited? No Media Visual Animatable Yes (see example)

Как установить CSS margin и padding (и крутые советы по раскладке)

Дата публикации: 2020-05-17

От автора: когда я только начал изучать CSS, я все время путался в margin и padding. Они казались очень похожими, а в некоторых случаях давали одинаковый результат. В этом уроке вы увидите разницу между CSS margin и padding, а также узнаете, как эти свойства влияют на пространство между элементами на странице. Также мы обсудим схлопывание margin’ов, использование разных единиц измерения при создании адаптивных сайтов. Завершим статью мы парочкой советов по раскладке с использованием margin и padding.

Блочная модель

Элементы в CSS представляются в виде прямоугольных блоков. Размер прямоугольного блока определяется свойствами элемента: контент, padding, рамка, margin.

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

Как видно из диаграммы, padding – это слой, расширяющий элемент от внешней грани области контента до внутренней грани рамки. С помощью этого свойства контролируется расстояние между рамкой элемента и его контентом. Padding влияет на размер элемента на странице, однако он никак не влияет на расстояние между элементами на странице.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Если нужно увеличить или уменьшить расстояние между элементами, используйте margin. Свойство margin никак не влияет на размеры элемента.

Важно помнить, что размеры всех блоков на веб-странице зависят от используемой блоковой модели. Существует две блочных модели: блочная модель W3C, традиционная блочная модель.

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

Например, давайте возьмем блок с шириной 200px и высотой 200px, padding 10px по всем сторонам и рамкой 2px по всем сторонам. Браузер не видит блок 200px. Браузер вычисляет горизонтальное пространство, необходимое для отображения блока, и оно равно 224px: 200 (ширина)+2(левая рамка)+10(левый padding)+10(правый padding)+2(правая рамка)=224px. Так как это квадрат, то высота тоже будет равна 224px.

С другой стороны, традиционная блоковая модель за ширину принимает сумму контента, padding’ов и рамки. Это значит, что если ваш блок имеет ширину 200px, то браузер вычислит горизонтальное пространство, необходимое для его отображения, и оно будет равно 200px, включая padding и рамку. Результат более предсказуем, и с ним легче работать.

По умолчанию все браузеры используют блоковую модель W3C. Модель можно задать вручную с помощью свойства box-sizing. Принимаются два значения content-box (W3C) и border-box (традиционная модель). Традиционная модель интуитивно понятнее, что сделало ее самой популярной среди веб-разработчиков.

Ниже показано, как с помощью box-sizing использовать традиционную модель в своем проекте:

Если вы быстрее запоминаете, когда делаете что-то сами, то попробуйте поэкспериментировать с забавным интерактивным демо от Guy Routledge.

Установка margin и padding

С помощью свойств padding-top, padding-right, padding-bottom и padding-left можно управлять внутренним отступом по всем четырем сторонам элемента. Также padding можно задавать через сокращенное свойство. Если записано одно значение padding, CSS использует его для определения отступа для всех 4 сторон:

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

Если представлено 3 значения, первое отвечает за верх, второе за лево и право, а третье за низ:

Если представлены все 4 значения, то каждое отвечает за верх, право, низ и лево соответственно:

В демо ниже оранжевый фон – это область контента для разных элементов, белая область между рамкой и контентом – padding:

Внешний отступ можно, как и padding, контролировать по всем 4 сторонам с помощью свойств margin-top, margin-right, margin-bottom и margin-left. Также margin можно задать для всех 4 сторон разом с помощью сокращенного свойства.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Что нужно помнить

Используйте правильные единицы измерения

При работе с padding и margin избегайте абсолютных единиц измерения. Такие единицы не адаптируются под изменения размеров шрифта и ширины экрана.

Скажем, вы задали ширину элемента на 50% и margin 15px. На ширине 1200px ширина элемента будет составлять 600px, а margin так и будет 15px. На ширине 769px ширина элемента будет равна 384px, а margin все еще будет 15px.

Ширина элемента изменилась на 36%, а его margin остался прежним. В большинстве случаев это не самая большая проблема. Однако если задать margin элемента в процентах, то вы будете лучше контролировать макет страницы на всех экранах. Все будет выглядеть пропорционально без резких прыжков в значениях примененных margin и padding.

Точно так же, возможно, вы захотите добавить padding к текстовым элементам на странице. В большинстве случаев хочется, чтобы padding был пропорционален размеру шрифта на элементе. На абсолютных единицах сделать это невозможно. Однако если задать padding в em, то он будет автоматически подстраиваться под размер шрифта. Демо ниже демонстрирует масштабирование в действии.

Как браузеры вычисляют margin и padding для разных единиц измерения

Браузеры по-разному вычисляют конечные значения margin и padding в зависимости от единиц измерения.

Margin и padding, заданные в процентах, вычисляются относительно ширины контейнера. То есть padding 5% будет равен 5px, если ширина контейнера составляет 100px, или 50px, если ширина контейнера равна 1000px. Не забывайте, что верхнее и нижнее значения вычисляются также по ширине контейнера.

В случае с em значение margin и padding основывается на размере шрифта данного элемента. В предыдущем демо padding на трех нижних текстовых элементах равен 1em. Из-за разного размера шрифта вычисленное значение padding будет всегда разным.

Также существует 4 вьюпорт единицы измерения vw, vh, vmin и vmax. В этом случае значения margin и padding будут зависеть от вьюпорта. Например, padding 5vw будет равен 25px при ширине вьюпорта 500px, а padding 10vw будет равен 50px на том же вьюпорте. Более подробно изучить данные единицы измерения можно в статье на сайте SitePoint «CSS вьюпорт единицы измерения: быстрый старт».

Если вы новичок, знание принципов работы этих единиц поможет вам быстро понять, почему padding и margin на HTML-элементах меняются в зависимости от размеров родителя, шрифта или даже вьюпорта. А это даст вам способность контролировать ваш макет.

Схлопывание margin’ов

Также вам нужно знать про концепцию схлопывания margin’ов. В определенных ситуациях верхний и нижний margin’ы на двух элементах могут схлопываться в один. Данный феномен называется схлопывание margin’ов.

Скажем, у вас есть два элемента один под другим, т.е. на одном уровне. Если на первом элементе задать margin-bottom 40px, а на втором margin-top 25px, то общий margin между элементами не будет равен 65px. Отступ будет равен значению большего margin’а, т.е. 40px.

Точно так же margin может схлопываться между родителем и первым или последним дочерним элементом. Это происходит, если нет рамки, padding’а или инлайнового контента, отделяющего дочерний и родительский margin’ы. В таком случае если на родителе нет padding’а или рамки, margin дочернего элемента будет «вытекать» из родителя.

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

В случае с отрицательными margin’ами конечное значение схлопнувшегося margin’а равно сумме положительного margin’а с самым маленьким отрицательным. Более подробно тему схлопывания margin’ов можно изучить в статье «схлопывание margin’ов» от Adam Roberts.

Интересные способы применения margin и padding

Иногда с помощью margin и padding можно решить проблемы с макетом. Ниже описано несколько примеров:

Центрирование элементов внутри родителей

С помощью margin очень просто центрировать блочные элементы внутри родителя. Нужно всего лишь поставить margin-left и margin-right в auto.

Илон Маск рекомендует:  Dos fn 4dh дать код выхода программы wait
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL