border-spacing в CSS


border-spacing

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

Рамки таблицы и ячеек и расстояния между ними.

Если у таблицы установлено свойство border-collapse со значением collapse , то свойство CSS border-spacing будет проигнорировано.

Тип свойства

Применяется: к тегу и элементам, у которых свойство display имеет значение table или inline-table .

Значения

Значением свойства border-spacing является один из следующих вариантов:

  • Размеры — указание одной или двух (через пробел) относительных или абсолютных величин в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы. Если указана одна величина, то она устанавливает сразу расстояния между рамками по вертикали и горизонтали, если две, то первая задает расстояния по горизонтали, а вторая по вертикали.
  • inherit — наследует значение CSS border-spacing от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: в спецификации CSS указан 0, однако браузеры обычно устанавливают размер в 2px.

Синтаксис

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

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

Версии 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 не понимают свойство CSS border-spacing .

CSS: border-spacing property

This CSS tutorial explains how to use the CSS property called border-spacing with syntax and examples.

Description

The CSS border-spacing property defines the spacing between the borders of adjacent cells in a table when using the separated borders model to render the table (see the border-collapse property to change the rendering model).

Syntax

The CSS border-spacing property can be expressed with one or two values provided.

Syntax — One Value

The syntax for the CSS border-spacing property (with 1 value) is:

When one single value is provided, the border-spacing value will apply to both the horizontal space and vertical space between adjacent cells. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, .
table
inherit Element will inherit the border-spacing from its parent element
table

Syntax — Two Values

The syntax for the CSS border-spacing property (with 2 values) is:


When two values are provided, the first value will apply to the horizontal space between cells. The second value will apply to the vertical space between cells. It can be the following:

Value Description
fixed Fixed value expressed in px, em, .
table
  • The border-spacing property applies to an HTML table that is rendered using the separated borders model (see border-collapse property to learn more about the border models).
  • The separated borders model renders a table such that adjacent cells have their own distinct borders that are not shared, and the border-spacing property determines the spacing between the cells.
  • The collapsed borders model renders a table such that adjacent cells share their borders.

Browser Compatibility

The CSS border-spacing property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 8+ (IE 8+)
  • Opera 4+
  • Safari (WebKit)

Example

We will discuss the border-spacing property below, exploring examples of how to use this property in CSS.

Let’s first look at an example of where we set the border-spacing on a table that is rendered using the separated borders model. For example:

The CSS would look like this:

The HTML would look like this:

The table rendered using the separated borders model would look like this:

In this CSS border-spacing example, we have set the border-spacing property to 3px for the horizontal spacing and 10px for the vertical spacing. So as you can see, the border-spacing property works as expected on a table rendered with the separated borders model, which is the default rendering model for HTML tables.

Now let’s look at what happens when you change the rendering model to the collapsed borders model (as specified by border-collapse: collapse).

Now using the collapsed borders model, our table would look like this:

As you can see, the border-spacing property has no affect on our table once the border-collapse property has been set to collapse.

border-spacing

Браузер 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 (ЦСС)2
Значение по умолчанию
Наследуется Да
Применяется К таблицам
Аналог ШТМЛ
Ссылка на спецификацию http://www.w3.org/TR/CSS21/tables.ШТМЛ#propdef-border-spacing

Описание

Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse .

Синтаксис

border-spacing: значение [значение]

Аргументы

Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если аргументов два, то первое определяет горизонтальное расстояние, а второе — вертикальное.


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

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

Рис. 1. Применение параметра border-spacing

html table border spacing

I am trying to give spacing between columns in a html table,

Actually, I thought I just wanted spacing at the right side of each column.

So far, I only managed to use border-spacing property to add spacing between each columns. When I use this property, I realise there is spacing on both the left side and right side of each column. Is it possible to use css rules such that only spacing is applied at the right side?

I have a code snippet of my current method below:

border-spacing

The border-spacing property is used to specify the distance between the borders of adjacent border cells.

It is also used to specify (or add to) the distance between the table borders and the borders of cells at the table’s edges (cells belonging to the first and last rows and columns).

It takes one or two length values that determine the vertical and horizontal spacing. If one value is specified, it gives both the vertical and horizontal spacing. If two values are specified, the first one gives the horizontal spacing and the second one gives the vertical spacing.

When the value of the border-spacing property is used to determine the distance between the table borders and the cells at its edges, the spacing is added to any padding applied to the table. The distance between the table border and the borders of the cells on the edge of the table is the table’s padding for that side, plus the relevant border spacing distance. For example, on the right hand side, the distance is the table’s padding-right value plus the horizontal border-spacing .

Trivia & Notes

The border-spacing property only applies when the value of the border-collapse property is separate , because otherwise, if the borders are collapsed with a collapse value, there won’t be any spaces between the borders.

Official Syntax

  • Syntax:
  • Initial: 0
  • Applies To: elements with ‘table’ and ‘inline-table’ display
  • Animatable: no
  • Values

    See the entry for a list of possible values. Negative values are not allowed.

    inherit The border spacing is inherited from the element’s parent.

    Examples

    Live Demo

    The table in the following demo has a padding and a border spacing set to it. Try changing the values to see how the spacing changes between the cells and around them.

    Browser Support


    The border-spacing property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+, and on Android and iOS.

    Further Reading

    Written by Sara Soueidan. Last updated February 3, 2015 at 12:35 pm by Mary Lou.

    Do you have a suggestion, question or want to contribute? Submit an issue.

    CSS border-spacing Property

    Description

    The border-spacing CSS property sets the spacing between the borders of adjacent table cells using the separated border model. If the collapsing border model is used, this property is ignored. See the border-collapse property.

    The following table summarizes the usages context and the version history of this property.

    Default value:
    Applies to: The table and inline-table elements
    Inherited: Yes
    Animatable: Yes. See animatable properties.
    Version: CSS 2, 3

    Syntax

    The syntax of the property is given with:

    border-spacing : [ length ] 1 or 2 values | initial | inherit

    The border-spacing property can take one, or two whitespace separated length values.

    • If one value is specified, it applies to both the horizontal and vertical border spacing.
    • If two values are specified, the first sets the horizontal border spacing, and the second sets the vertical border spacing.

    The example below shows the border-spacing property in action.

    Example

    • table <
    • border-collapse : separate ;
    • border-spacing : 10px 20px ;
    • >

    Property Values

    The following table describes the values of this property.

    Value Description
    length A length value in px , pt , cm , em , etc. Negative values are not allowed.
    initial Sets this property to its default value.
    inherit If specified, the associated element takes the computed value of its parent element border-spacing property.

    Browser Compatibility

    The border-spacing property is supported in all major modern browsers.

    Browser Support–


    • Firefox 1+
    • Google Chrome 1+
    • Internet Explorer 8+
    • Apple Safari 1+
    • Opera 4+

    Warning: Internet Explorer 7 and earlier versions don’t support the border-spacing property. IE8 supports this property only if a is specified.

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

    Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.

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

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

    Поэтому в этом задании мы используем border-collapse: separate , которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse , то результат не изменится, ячейки будут отображаться раздельно.

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

    с помощью атрибута cellspacing тега

    или c помощью CSS-свойства border-spacing .

    Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding , которое задаётся для ячеек.

    CSS — border-spacing

    Description

    border-spacing sets the distance between cells in a table, assuming that the table is rendered using the separate-borders model.

    Possible Values

    length − Any length unit. If two values are declared, the first applies to spacing along the horizontal axis, and the second applies to the vertical axis.

    Applies to

    Elements with a display of table or inline-table.

    DOM Syntax

    Example

    Here is the example to show usage of border-spacing −

    NOTE − This property does not work in IE 6 or NS 7.

    Свойство CSS border-spacing

    table
    <
    border-collapse:separate;
    border-spacing:10px 50px;
    >

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

    Свойство CSS border-spacing задает дистанцию между границами соседних ячеек в таблице (только для ячеек со стилем separate).

    Значение по умолчанию нет
    Наследование да
    Версия CSS CSS 2
    Синтаксис JavaScript object.style.borderSpacing=»15px»

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

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

    Заметка: Internet Explorer 8 (и выше) поддерживают свойство border-spacing, только если указан DOCTYPE.

    Возможные значения свойства border-spacing

    Расстояние между границами соседних ячеек в px (пикселях), cm (сантиметрах) и тд. Отрицательные значения запрещены:

    Border-spacing в CSS

    Свойство border-spacing задает расстояние между ячейками в таблице.

    Свойство применяется только в том случае, когда каждая ячейка имеет свои собственные границы: при значении separate свойства border-collapse .
    И не применимо, когда свойство border-collapse принимает значение collapse .

    Это свойство применимо к таблицам.

    Не поддерживается Internet Explorer до версии 8.0.

    Значение

    Расстояние задается в пикселях.

    — одно значение — расстояние между всеми ячейками таблицы одинаковое,

    — два значения – первое значение задает расстояние между ячейками по вертикали, второе – по горизонтали,

    — inherit — принимает значение свойства родительского элемента.

    Илон Маск рекомендует:  Что такое код posix_getuid
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL
    Значение Описание
    длина длина