Day: July 26, 2021

CSS border-spacing property

by shashank KCSSLeave a Comment on CSS border-spacing property

This CSS property is used to set the distance between the borders of the adjacent cells in the table. It applies only when the border-collapse property is set to seprate. There will not be any space between the borders is the border-collapse is set to collapse.

It can be defined as one or two values for determining the vertical and horizontal spacing. When only one values is specified, then it sets both horizontal and vertical spacing. When we use the two value syntax, then the first one is used to set the horizontal spacing, and the second value sets the vertical spacing.

syntax:-

border-spacing: length | initian | inherit;

property values:-

length:- This value sets the distance between the borders of the adjacent table cell in px, cm, pt, etc. Negative values are not allowed.

initial:- It sets the property to its default value.

inherit:- It inherit the property from its parent element.

Example:-

Using the value of the border-spacing property. The border- collapse property is set to separate, and value of the border-spacing is set to 45px.

CSS border-spacing property

Example:-

Using two values of teh border spacing property. The border-collapse property is set to separate, and the value of teh border-spacing is set to 20pt 1em. The first value, i.e., 20pt sets the horizontal spacing, and the 1 em set the vertical spacing.

CSS border-spacing property
Tagged : / /

CSS border- collapse property

by shashank KCSSLeave a Comment on CSS border- collapse property

This property set the border of the table cells ans specifies wheather the table cells share the seprate or common border.

This property has two main values that are seprate and collapse. When it is set to the value seprate, distance between the cells can be defined using the border-specing property. When the border-collapse is set to the value collapse, then the inset value of the border-style property behaves like groove, and the outset value behave like ridge.

Syntax:-

border-collapse: separate| collapse| initial | inherit;

Property values:-

seprate:- It is the default value that seprates the border of the table cell. Using the value, each cell will display its own border.

collapse:- The value is used to collapse the borders into a single border. Using this, two adjacent table cells will share a border. When this value is applied, the border-spacing property does not affect.

initial:- It sets the property to its default value.

inherit: It inherits the propperty form its parent element.

Example- Using seprate value

Example:- Using collapse property:-

Tagged : / /