Как с помощью css задать отступ шириной в 5px внутри элемента

CSS внутренние отступы

Ещё раз посмотрите статью «CSS блоковая модель», она вам очень поможет. В этой статье будут рассмотрены внутренние отступы.

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

CSS: Внутренние отступы

Взгляните на пример из прошлого урока. Мы вывели текст на сером фоне, при этом он «приклеен» к блоку, в котором размещается.

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

  • отступ сверху;
  • отступ справа;
  • отступ снизу;
  • отступ слева.

Помимо такой записи для удобства существуют сокращённые записи этих правил:

  • Если указать два значения, то первое будет использоваться для отступов по вертикали (сверху и снизу), а второе по горизонтали (справа и слева).
  • Если указать только одно значение, то оно будет использовано одновременно для всех сторон.
  • Если указать три значения, то они будут использоваться для отступа сверху, по горизонтали и снизу.

Таким образом можно пример выше записать следующим образом:

Задание

Добавьте в редактор div с классом padding и установите внутренние отступы:
* 10 пикселей сверху,
* 15 пикселей снизу,
* 20 пикселей слева и справа.

Добавьте черный фон к блоку. Попробуйте различные значения свойства padding для того, чтобы увидеть как это влияет на блок.

Как с помощью css задать отступ шириной в 5px внутри элемента

Урок 9. Отступы (поля) вокруг объектов в CSS.

Автор: Андрей Краснокутский

Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно — это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. — это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом — будет абзац с текстом заключенным в теги <p> </p> .

Создаем новый класс например .pol , и в фигурных <> скобках начинаем писать код стиля. Первое свойство:

margin: 60px; — задает отступ со всех сторон вокруг абзаца (контейнера) в 60 px , естественно 60 px — взято для примера эта цифра может быть любая которая Вам больше подходит в каждом конкретном случае. Есть и варианты, а именно:

Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom: ) или только сверху ( margin-top: ) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так:

Что мы записали? Эта запись означает: Отступ сверху по умолчанию (как задано во всем тексте), а совсех остальных сторон отступ 60px , все очень просто.

Следующее свойство padding: Это свойство можно условно отнести к внутренним отступам, это свойство задает отступы внутри контейнера, например если мы заключим наш текст в рамку и запишем новый стиль так:

Что мы записали? Эта запись означает — мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон.

Так же как и преведущее свойство margih , свойство padding: имеет варианты:

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

Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код:

Код записанный в листинге 9.3. означает, что мы заключили текст нашего абзаца в рамку фиксированных размеров шириной 400 px и высотой 300 px черного цвета, толщиной в 1 px.

Теперь давайте разберемся как нам выровнять только что созданный блок заключенный в рамку. Для этого существует атрибут float: — указывает браузеру, что элемент (в данном случае блок 400х300) является плавающим . Подругому можно сказать, что атрибут float — это аналог атрибута align т.е. выравнивание. Принимает два значения:

Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода:

Здесь мы задали еще и отступ текста от плавающего объекта в 20 px.

На сегодня все , пробуйте и экспериментируйте и у Вас все получится.

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) — АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Когда нужно пересматривать инструкции по Охране труда

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Март

Февраль

Декабрь

Август

Июль

Июнь

Май

Февраль

Январь

Октябрь

Сентябрь

Август

Июль

Май

Апрель

Февраль

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

Декабрь

Ноябрь

Октябрь

Сентябрь

Август

Июль

Июнь

Май

Апрель

Март

Февраль

Январь

Декабрь

Ноябрь

Регистрация доменов

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки.

Добавить комментарий

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