Html input left padding

padding-left

The padding-left CSS property sets the width of the padding area to the left of an element.

Try it

An element’s padding area is the space between its content and its border.

Note: The padding property can be used to set paddings on all four sides of an element with a single declaration.

Syntax

/* values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* value */ padding-left: 10%; /* Global values */ padding-left: inherit; padding-left: initial; padding-left: revert; padding-left: revert-layer; padding-left: unset; 

The padding-left property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.

Values

The size of the padding as a fixed value. Must be nonnegative.

The size of the padding as a percentage, relative to the inline size (width in a horizontal language, defined by writing-mode ) of the containing block. Must be nonnegative.

Formal definition

Initial value	0
Applies to	all elements, except table-row-group , table-header-group , table-footer-group , table-row , table-column-group and table-column . It also applies to ::first-letter and ::first-line .
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

Formal syntax

Examples

Setting left padding using pixels and percentages

.content  padding-left: 5%; > .sidebox  padding-left: 10px; > 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Introduction to the CSS basic box model
• padding-top , padding-right , padding-bottom and the padding shorthand
• The mapped logical properties: padding-block-start , padding-block-end , padding-inline-start , and padding-inline-end and the shorthands padding-block and padding-inline

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Тег input

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

Атрибуты

password — поле для ввода пароля

email — поле для ввода email адреса

tel — поле для ввода номера телефона

file — создает кнопку загрузки файла

number — поле для ввода цифр

url — поле для ввода URL адреса

range — поле для выбора значений от и до

date — поле для выбора даты

time — поле для выбора времени

datetime — поле для выбора даты и времени

submit — кнопка для отправки формы

reset — кнопка для сброса значений формы

Уникальное имя поля. Используется для получения значений на сервере.

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

Указывает что поле обязательно для заполнения. Браузерная проверка.

Поле недоступно для заполнения.

Устанавливает фокус в данное поле по умолчанию при загрузке страницы.

Поле только для чтения. Ввод запрещен.

Указывает последовательность перехода по полям формы при нажатии на кнопку tab. Указывается целое положительное либо отрицательное число.

Минимальное значение поля. Используется для полей с типом date, range, number

Максимальное значение поля. Используется для полей с типом date, range, number

Максимально допустимое количество символов вводимых в поле.

Читайте также

статья полужирный текст область для рисования заголовок второго уровня заголовок пятого уровня заголовок шестого уровня заголовок группы формы карта изображения подсвечивание текста мета-данные группа элементов option заголовок details шаблон вставка даты и времени строка таблицы

Обсуждение ( 2 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Источник

Тюнинг резинового текстового поля

Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов полей (margin), будет равна:

width = width + padding-left + padding-right

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

1. input-width – этот контейнер задает результирующую ширину текстового поля;
2. width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

.input-width < height:23px; border:1px solid #999; background:#fff; >.width-setter < height:23px; margin:0 9px; >.width-setter input

Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
Опишем по-новому исходный набор контейнеров:

.input-width < height:23px; border:1px solid #999; background:#fff; >.width-setter < height:23px; margin:0 9px; position:relative; >.width-setter input

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

Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

Источник