Отступ от border html

border — spacing

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

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

 table  border-spacing: 10px;> table  border-spacing: 10px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Разрешается указывать одно или два неотрицательных значения:

1. border — spacing : 1px — расстояние между ячейками со всех сторон одинаковое.
2. border — spacing : 1px 2px — первое значение задаёт расстояние между ячейками по горизонтали, второе — по вертикали.

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство border — spacing задаёт расстояние между ячейками таблицы. Это свойство работает только для таблиц со свойством border — collapse в значении separate .

Отступ также будет появляться вокруг таблицы, поэтому расстояние между ячейками таблицы и её рамкой будет складываться из значений border — spacing и padding таблицы.

Источник

border-spacing

The border-spacing CSS property sets the distance between the borders of adjacent cells in a . This property applies only when border-collapse is separate .

Try it

The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Syntax

/* */ border-spacing: 2px; /* horizontal | vertical */ border-spacing: 1cm 2em; /* Global values */ border-spacing: inherit; border-spacing: initial; border-spacing: revert; border-spacing: revert-layer; border-spacing: unset; 

The border-spacing property may be specified as either one or two values.

• When onevalue is specified, it defines both the horizontal and vertical spacings between cells.
• When twovalues are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).

Values

The size of the spacing as a fixed value.

Formal definition

Formal syntax

Examples

Spacing and padding table cells

This example applies a spacing of .5em vertically and 1em horizontally between a table’s cells. Note how, along its outside edges, the table’s padding values are added to its border-spacing values.

HTML

table> tr> td>1td> td>2td> td>3td> tr> tr> td>4td> td>5td> td>6td> tr> tr> td>7td> td>8td> td>9td> tr> table> 

CSS

table  border-spacing: 1em 0.5em; padding: 0 2em 1em 0; border: 1px solid orange; > td  width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Feb 21, 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.

Источник

Creating space between an element and its border

I’m trying to create a spacing between an element and its outermost border. (EDIT: he wants to do two borders between the element proper and the outside of the box-model box. This gives him the room of using the margin, border and padding to achieve his goal). So far my searches in Google and here produced no solution to this. I am trying to avoid using images to acheive this.

5 Answers 5

Here’s a link to a site that demonstrates «margin», «border», and «padding» for an element. http://css-tricks.com/the-css-box-model/

However, there used to be a problem with IE’s rendering of the box model and the «rest of the world» in that IE used a different mechanism to determine «overall width». You need to understand that if you plan on supporting IE7 (two generations old) or older.

I imagine that using the «rest of the world» way will be sufficient for your needs.

For the rest of the world (and the sake of when that link no longer works) here’s an ascii version of the same diagram:

+----------------------------+ | | | margin | | | | *******border********** | | * * | | * padding * | | * * | | * --------------- * | | * --------------- * | | * ---ELEMENT----- * | | * --------------- * | | * --------------- * | | * * | | *********************** | | | | | +----------------------------+ 

the padding doesnt seem to work. using the following css there is no transperent spacing between the black color and the red border: div

@GZaidman Then you need to nest a div inside a div. I thought you wanted spacing from the element. Background-color does not affect only the element. You were not clear on that when you first posted the question, and then I was afk. Hope this helps.

I read about multiple borders (here), and I think it might help solve the problem without using another div, but I dont know if it’s possible to create a transparent border

There is no such CSS property as «multiple borders». What that article discusses is advanced CSS concepts. If you notice, it’s effectively creating a wrapper element (using :before) that can do what you want. I suggest sticking to the simpler to manipulate concepts until you’ve built up more familiarity with more complex examples like pseudo selectors. For what it’s worth, it was about five years after I first heard about :before and :after and it was still another six months or so before I really got how they worked. (I didn’t have a need for them either)

Источник

CSS border-spacing Property

The border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is separate.

Default value:	2px
Inherited:	yes
Animatable:	yes. Read about animatable Try it
Version:	CSS2
JavaScript syntax:	object.style.borderSpacing=»15px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

• If one value is specified, it defines both the horizontal and vertical spacing between cells
• If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Space between border and content? / Border distance from content? [duplicate]

Is it possible to increase the distance between a border and its content? If it is possible, just do it on here: JSFiddle What I plan on doing is putting a glow around the content (using a shadow with 0px/0px distance) and then putting a border a couple of pixels away from the glow. NOTE: I have decided to do an inset shadow and a border instead, it looks better, but thanks for the answers :3

Realizing this is pretty old. Even if you went with a solution that rendered the question moot to you, it’s worth accepting an answer if it answered that original question satisfactorily.

6 Answers 6

Add padding. Padding the element will increase the space between its content and its border. However, note that a box-shadow will begin outside the border, not the content, meaning you can’t put space between the shadow and the box. Alternatively you could use :before or :after pseudo selectors on the element to create a slightly bigger box that you place the shadow on, like so: http://jsbin.com/aqemew/edit#source

Its possible using pseudo element (after).
I have added to the original code a

Can you please explain how this works? I mean why keeping position: relative in #content and position: absolute in #content:after leads to this effect?

If you have background on that element, then, adding padding would be useless.

Explanation: If you use wrapper, then it would be simple to separate the background from border. But if you want to style the same element, which has a background, no matter how much padding you would add, there would be no space between background and border, unless you use background-clip or outline-offset

Источник