CSS предлагает веб-разработчику колоссальные возможности для оформления HTML-страниц. Новичку они покажутся сложными, но если тщательно и методично в них разбираться, технология таблиц стилей покорится, и вёрстка сайтов перестанет доставлять трудности. Одно из незаменимых свойств CSS - padding . Используется оно, чтобы задать поля блоков HTML-страниц.
Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.
Чаще всего блоки задаются тегами
,
Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.
Пример использования | Пояснение |
padding: 15 px; | Если после атрибута следует одно число, это означает, что элемент будет иметь одинаковые поля со всех сторон. Запись px предполагает, что значение задаётся в пикселях. То есть в итоге блок будет иметь поля по 15 пикселей. |
padding: 18 px 36 px; | Первое из двух чисел указывает, что вертикальные поля составят по 18 пикселей, боковые - в два раза больше - 36 пикселей. |
padding: 6 px 12 px 18 px; | Среднее число - значение полей по бокам (левого и правого), два других - вертикальные поля. При этом первое число (6 px) относится к верхнему полю, а последнее (18 px) - к нижнему. |
padding: 6 px 12 px 18 px 36 px; | Форма записи свойства CSS padding , в которой присутствуют четыре числа, позволяет задать поля со всех сторон блока. Числовые значения последовательно применяются к верхнему полю и далее по часовой стрелке - к правому, нижнему и левому. |
padding-left: 14 px; | Приписка left говорит сама за себя - поле будет установлено только слева элемента. |
padding-right: 14 px; | Аналогично предыдущему варианту записи - поле создастся только справа блока. |
padding-top: 14 px; | Запись определяет поле сверху. |
padding-bottom: 14 px; | Запись определяет поле снизу. |
Следует заметить, что по умолчанию в CSS padding равен нулю. Данный атрибут не является наследуемым, то есть его необходимо устанавливать для каждого блока. Помимо привычных и понятных пикселей, ширина пустого пространства вокруг блоков задаётся и в относительных единицах. Например, в примерах выше можно записать 5% - в результате ширина поля просчитается браузером автоматически.
Итак, формы записи атрибута рассмотрены, но как его использовать на HTML-странице? Первый вариант - более «красивый», когда всё, что касается технологии CSS, не прописывается в HTML, а вынесено в отдельный файл с соответствующим расширением.
Второй вариант - запись непосредственно в тег <style >. CSS padding в этом случае задаётся следующим образом:
< div style=" padding: 22 px">
Как записать атрибут - выбирает верстальщик. В любом случае необходимо владеть всеми способами применения свойства для определения полей, чтобы при случае воспользоваться им.
Последнее обновление: 08.04.2016
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname : устанавливает направление текста
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
Урок 9. Отступы (поля) вокруг объектов в CSS.
Дата: 2009-04-22
Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно - это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. - это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом - будет абзац с текстом заключенным в теги .
Создаем новый класс например .pol , и в фигурных {} скобках начинаем писать код стиля. Первое свойство:
margin: 60px; - задает отступ со всех сторон вокруг абзаца (контейнера) в 60 px , естественно 60 px - взято для примера эта цифра может быть любая которая Вам больше подходит в каждом конкретном случае. Есть и варианты, а именно:
margin-left: - отступ слева;
margin-top: - отступ сверху;
margin-right: - отступ справа;
margin-bottom: - отступ снизу.
Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom: ) или только сверху (margin-top: ) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так:
Листинг 9.1.
Что мы записали? Эта запись означает - мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон.
Так же как и преведущее свойство margih , свойство padding: имеет варианты:
padding-left: - отступ слева;
padding-top: - отступ сверху;
padding-right: - отступ справа;
padding-bottom: - отступ снизу.
Напоминаю что все эти свойство задают отступ внутри контейнера (от рамки до текста в нашем случае) применять их можно так же, по отдельности или в любых сочетаниях.
Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код:
Листинг 9.3.
Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода.
В этой статье я хотел бы рассказать, как правильно расставлять поля (padding) и отступы (margin) в CSS.
Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C . В боксовой модели (box model) поля - это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.
Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing .
В любом случае следует помнить, что поля могут быть как включены в ширину или высоту элемента, так и нет. Отступы же всегда задаются снаружи элемента.
Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.
Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .
Другие новости
Поскольку каждый из этих элементов имеет одинаковые отступы слева и справа, то лучше задать поля родительскому блоку, а не задавать отступы слева и справа для каждого элемента в отдельности.
News { padding: 20px 25px; }
Таким образом, при необходимости изменить значение полей справа и слева это нужно будет сделать в одном месте . А при добавлении нового элемента внутрь блока новостей, он уже будет иметь нужные отступы слева и справа.
Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.
Теперь нужно задать вертикальные отступы между элементами. Для этого следует определить какой из элементов является обязательным . Очевидно что блок новостей не может существовать без списка новостей, в то же время ссылки «Другие новости» может и не быть, заголовок тоже может быть убран, например, при изменении дизайна.
Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.
News__title { margin-bottom: 10px; } .news__more-link { margin-top: 12px; }
Мы могли бы достигнуть такого же внешнего результата, добавив отступы сверху и снизу для списка новостей.
News__list { margin: 10px 0 12px 0; }
Теперь нужно задать отступы между отдельными новостями. Опять же, нужно принять во внимание, что количество новостей может меняться, и в списке может быть только одна новость.
Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор:first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора:last-child , который был добавлен только в спецификации CSS версии 3.0 .
News__list-item { margin-top: 18px; } .news__list-item:first-child { margin-top: 0; }
Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное - определить, какие элементы блока являются основными (обязательными ), а какие опциональными .
Иногда мы не можем опираться на обязательные элементы. Например, у нас есть всплывающее окошко popup , внутри которого может выводиться какой-то заголовок и текст. Причем в каких-то случаях может не быть текста, а в каких-то и заголовка. То есть оба элемента являются опциональными.
В этом случае можно использовать следующий способ задания отступов.
Popup__header + .popup__text { margin-top: 15px; }
Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.
Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ - это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .
То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».
Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля (padding) также суммируются.
Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .
H1 { margin-bottom: 24px; } h2 { margin-top: 24px; margin-bottom: 12px; } p { margin-top: 12px; }
Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .
Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.
Теги: Добавить метки
Время от времени я встречаюсь с достаточно необычными текстовыми полями, которые сделать обычными возможностями HTML и CSS не представляется возможным. Там присутствуют закругления, градиенты, тени и другие графические навороты. И в этой статье я расскажу, как сделать красивое текстовое поле на HTML-странице , имеющее все эти графические навороты.
Первым делом, Вам необходимо сделать 3 картинки из текстового поля:
Очень важный момент заключается в том, что все 3 картинки должны быть одинаковой высоты . Следующий этап - это HTML-код :
Как видите, мы сделали таблицу из 1-й строки и 3-х столбцов . В первом столбце у нас планируется левый угол, во втором - само текстовое поле, в третьем - правый угол.
И теперь CSS-код :
Input_left {
background: url("input_left.jpg") no-repeat scroll 0 0 transparent; //Фон с левым углом
}
.input_right {
background: url("input_right.jpg") no-repeat scroll 0 0 transparent; //Фон с правым углом
}
input {
background: url("bg_input.jpg") repeat-x scroll 0 0 transparent; //Фон текстового поля
border: none; //Убрать стандартную рамку у текстового поля
height: 35px; //Высота картинки
outline: none; //Убрать рамку фокуса в IE
width: 200px; //Требуемая ширина текстового поля
}
Если Вы всё сделали правильно, то теперь Вы можете любоваться на своей странице красивым текстовым полем. На практике данный способ используется постоянно (не только для текстовых полей), поэтому знать его надо любому верстальщику.
