Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Отступы css в таблице

Отступы в таблицах

Итак, мы изучили с вами наиболее простые действия, которые можно осуществлять с границами таблиц. И теперь таблица выглядит куда более эстетично. Однако, наполнение ячеек прямо таки упирается в границы. Это легко можно исправить, достаточно лишь сделать отступы в ячейках в таблице HTML. И тогда текст внутри рамки, в ячейке, будет более читабельным.

Для того, чтобы сделать отступы в ячейке следует использовать атрибут cellpadding для тега

. Однако, есть и другой, более предпочтительный вариант: CSS.

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

Можно задать, на сколько именно пикселей должен осуществляться отступ. Приведем пример, в котором нижний отступ будет составлять 20 пикселей, а все остальные будут по 10. Такой CSS-код будет выглядеть вот так:

td { padding: 10px; padding-bottom: 20px; }

А полный код стилей на данном этапе:

table { border: solid 1px blue; border-collapse: collapse; } td { border: solid 1px blue; padding: 10px; padding-bottom: 20px; }

Результат в браузере:

Отступы между ячейками

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

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

Существует две возможности сделать отступы между ячейками:

с использованием атрибута cellspasing для тега

с использованием CSS-свойства border-spacing.

Надо подчеркнуть, что border-spacing прописывается для таблицы в целом, в то время как свойство padding прописывается непосредственно для ячеек.

Давайте глянем на пример:

table { border: solid 1px blue; border-collapse: separate; border-spacing: 5px; } td { border: solid 1px blue; padding: 10px; padding-bottom: 20px; }

И на получившийся результат:

Сразу оговорим, что не надо пытаться сделать такие отступы с помощью border-collapse: collapse. Ведь при использовании этой опции ячейки «липнут» друг к другу.

А чтобы они находились отдельно друг от друга, следует использовать border-collapse: separate. Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.

Назад Следующий урок

Настройка отступов в CSS

В каскадных таблицах стилей, для настройки отступов используют два свойства - margin и padding. Давайте разберемся, как они работают.

Margin

Мы помним о том, что на данный момент актуальная блочная модель документа. И для каждого из блоков мы можем настроить внешний отступ от края страницы, или его родительского элемента. Все зависит от того, в каком месте html потока данный блок расположен. Мы будем работать с блоком DIV.

Вам пригодится: div верстка.

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

[значение | проценты | auto] - укажите параметр отступа цифрой, в процентах, или оставьте значение auto

Для каждой стороны {1-4} - в этом варианте указания отступа, можно указывать значения одним из четырех возможных вариантов. 1) Единое значения для каждой стороны. 2) Сначала для верхней и нижней части блока одновременно, затем также для правой и левой части. 3) Здесь вы задаете отступ от верхнего края строки или родительского элемента, затем одновременно для левой и правой части блока, и в завершении для нижней. 4) Здесь поочередно устанавливайте отступы для каждой стороны - вверх, право, низ, лево.

Синтаксис свойства margin выглядит вот так:

div { margin: 10px 10px 10px 10px; margin-left:5%; margin-right: 0.8; margin-top: auto; margin-bottom: 15px; }

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

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

Padding

Аналогичное CSS свойство, назначает внутренние отступы в блоке. С помощью padding, вы можете задать отступ от содержимого блока, до его границы.

Значения задаются аналогично свойству margin. Вот так выглядит синтаксис:

div { padding: 10px 10px 10px 10px; padding-left:5%; padding-right: 0.8; padding-top: auto; padding-bottom: 15px; }

Мы можем применять эти два свойства в следующих ситуациях:

Отступ между строками,,k реализованный через CSS
Отступ от края страницы
Для внутренних отступов для любого элемента

Поля и отступы CSS - пояснение на примере четырех HTML-элементов

Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:

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

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

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

margin: 10px 20px 50px 100px;

Где:

10px — отступ сверху;
20px — отступ справа;

30px — отступ снизу;
40px — отступ слева.

Также можно установить margin left HTML и другие направления отдельно:

margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Синтаксис свойства CSS padding

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

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

Пример для установки полей и отступов в HTML-списке

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS, но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента

Демонстрация полей на примере HTML-таблицы

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для

. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;

Пример использования полей и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding, примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding:

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

Поля для кнопки:

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

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

Перевод статьи «CSS padding and margin – Explained with 4 HTML elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.