devxlogo

CSS: Spacing and Areas

CSS: Spacing and Areas

SS is an integral part of the future of the Web. You’ll need it in your toolkit sooner rather than later. It is particularly important with the advent of XML. Clear
{clear: none/left/right/both}
The clear property lets you specify whether to float the element or to have it clear to below other elements. The effect is similar to the effect of using the HTML tag
. Current browsers inconsistently support the clear property, so it is probably better to use the
tag.

The value none allows other elements to flow around an element. Left clears an element below elements to the left. Right clears an element below elements to the right.

Example:

	img {clear: left}
logologo
Here are two Project Cool logos. If you are using a CSS-1 compliant browser, the first Project Cool logo is aligned to the left and the second logo appears to the right of the first.

Float
{float: none/left/right}
The float property lets you place an element, such as an image, to the left or right of its containing block and allows other elements, like text, to flow around it.

The value none prevents other elements from flowing around an element. Left moves an element to the left margin and allows other elements to flow to the right of it. Right moves an element to the right margin and allows other elements to flow to the left of it. When the values left and right are used, the element will be treated as a block-level element no matter what. This property is best used with images and text.

Example:

	img {float: left}
logo This is the Project Cool logo. If you are using a CSS-enabled browser (this does not work with Netscape 4.0), the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left and have text flowing around it.




	img {float: right}	
logo

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the right and have text flowing around it.




	img {float: none}	
logo

This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it. This is the Project Cool logo. If you are using a CSS-enabled browser, the logo should be aligned to the left (default) and not have text flowing around it.

Height
{height: XXunits/%}
The height property lets you set the height of an element.

Height can be specified using absolute or relative units. Relative units calculate the height of an element using the height of the element’s containing block. It’s illegal to use negative values for height. The height property cannot be applied to table columns.

Example:

	img {height: 150px}
logo

If you are using a CSS-enabled browser, the Project Cool logo has a height of 150 pixels.

	img {height: 2cm}	
logo

If you are using a CSS-enabled browser, the Project Cool logo has a height of 2 centimeters.

	img {height: 50%}	

If you are using a CSS-enabled browser, the Project Cool logo is half as tall as this browser window.

Width
{width: XXunits/%}
The width property lets you set the width of an element.

Width can be specified using absolute or relative units. Relative units calculate the width of an element using the width of the element’s containing block. It is illegal to use negative values for width. The width property cannot be applied to table rows.

Example:

	img {width: 1.5in} 
logo

If you are using a CSS-enabled browser, the Project Cool logo is 1.5 inches wide.

	img {width: 50px}
logo

If you are using a CSS-enabled browser, the Project Cool logo is 50-pixels-wide.

		img {width: 25%}	

If you are using a CSS-enabled browser, the Project Cool logo is a quarter as wide as this browser window.

Border Color
{border-color: colorname/hexvalue/RGB(R%,G%,B%)}
The border-color property lets you set the color of a border.

You can enter one to four values to set different colors for different sides of the border. When there is one value, all four sides are the same color. If there are two values, the first value sets the top and bottom borders, and the second value sets the left and right borders. If there are three values, the first value sets the top border, the second sets the left and right borders, and the third sets the bottom border. With four values, the first sets the top border, the second the right border, the third the bottom border, and the fourth the left border.

The border-color property must be used in conjunction with the border-width and border-style properties to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-color: #228b22}	

If you are using a CSS-enabled browser, this paragraph has a forest green border.



	P {border-color: purple red green blue}	

If you are using a CSS-enabled browser, this paragraph has a purple top border, a red right border, a green bottom border, and a blue left bottom.

Border Style
{border-style: none/solid/double/dashed/dotted/groove/ridge/inset/outset}
The border-style property lets you set the line style of an element’s border. Not all of the border styles are supported by all browsers.

None means that there is no border. The border-width is 0.

Solid is a border that consists of a single line segment.

Double is a border made up of two solid lines. The value of the border-width of a double border consists of the two lines and the space between them.

Dashed is a border made up of a series of line segments.

Dotted is a border made up of a series of dots.

Groove is a border that looks like it has been carved into the background.

Ridge is the opposite of groove. This border looks as if it’s protruding out of the background, like a speed bump.

Inset is a border that makes its box look like it is embedded in the background.

Outset is a border that makes its box look like it is protruding out of the background.

You can enter one to four values to set different styles for different sides of the border. If there is one value, all four sides are the same style. If there are two values, the first value sets the top and bottom borders, and the second value sets the left and right borders. If there are three values, the first value sets the top border, the second sets the left and right borders, and the third sets the bottom border. If there are four values, the first sets the top border, the second the right border, the third the bottom border, and the fourth the left border.

Black groove, ridge, inset, and outset borders look like solid black borders. It is best to use the border-style property in conjunction with the border-width and border-color properties to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-style: double}

If you are using a CSS-enabled browser, this paragraph has a double border.



	P {border-style: ridge} 

If you are using a CSS-enabled browser, this paragraph has a ridge border.



	P {border-style: solid outset none}	

If you are using a CSS-enabled browser, this paragraph has a solid top border, outset right and left borders, and no bottom border.

Border Width
{border-width: XXunits/thin/medium/thick}
The border-width property lets you set the border width of all four of an element’s borders simultaneously.

It is illegal to use negative values for border-width. Different web browsers interpret thin, medium, and thick differently, but the width of thin is always smaller than medium, which is always smaller than thick.

You can enter one to four values to set different widths for different borders of an element. If there is one value, all four sides are the same width. If there are two values, the first value sets the top and bottom borders, and the second value sets the left and right borders. If there are three values, the first value sets the top border, the second sets the left and right borders, and the third sets the bottom border. If there are four values, the first sets the top border, the second the right border, the third the bottom border, and the fourth the left border.

The border-width property should be used in conjunction with the border-style property to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-width: medium thin thick}

If you are using a CSS-enabled browser, this paragraph has a medium top border, thin right and left borders, and a thick bottom border.



	P {border-width: 20px}	

If you are using a CSS-enabled browser, this paragraph has a 20-pixels-wide border.

Border Top
{border-top: width style color}
The border-top property lets you set the width, style, and color of an element’s top border simultaneously. Any omitted values will revert to their initial values.

Example:

	P {border-top: thick ridge green}

If you are using a CSS-enabled browser, this paragraph has a thick, ridge, green, top border.

Border Top Width
{border-top-width: XXunits/thin/medium/thick}
The border-top-width property lets you set the width of an element’s top border.

It is illegal to use negative values for border-top-width. Different Web browsers interpret thin, medium, and thick differently, but the width of thin is always smaller than medium, which is always smaller than thick.

The border-top-width property should be used in conjunction with the border-style property to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-top-width: 1cm}

If you are using a CSS-enabled browser, this paragraph has a 1-centimeter-tall top border.

Border Bottom
{border-bottom: width style color}
The border-bottom property lets you simultaneously set the width, style, and color of an element’s bottom borders. Any omitted values will revert to their initial values.

Example:

	P {border-bottom: 25px double #008080}

If you are using a CSS-enabled browser, this paragraph has a 25-pixel-tall, double, teal bottom border.

Border-Bottom- Width
{border-bottom-width: XXunits/thin/medium/thick}
The border-bottom-width property lets you set the width of an element’s bottom border.

It is illegal to use negative values for border-bottom-width. Different Web browsers interpret thin, medium, and thick differently, but the width of thin is always smaller than medium, which is always smaller than thick.

The border-bottom-width property should be used in conjunction with the border-style property to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-bottom-width: 2in}	

If you are using a CSS-enabled browser, this paragraph has a 2-inch-wide bottom border.

Border Right
{border-right: width style color}
The border-right property lets you set the width, style, and color of an element’s right border simultaneously. Any omitted values will revert to their initial values.

Example:

	P {border-right: 10px inset pink}

If you are using a CSS-enabled browser, this paragraph has a 10-pixel-wide, inset, pink right border.

Border Right Width
{border-right-width: XXunits/thin/medium/thick}
The border-right-width property lets you set the width of an element’s right border.

It is illegal to use negative values for border-right-width. Different Web browsers interpret thin, medium, and thick differently, but the width of thin is always smaller than medium, which is always smaller than thick.

The border-right-width property should be used in conjunction with the border-style property to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-right-width: 20px}

If you are using a CSS-enabled browser, this paragraph has a 20-pixel-tall right border.

Border Left
{border-left: width style color}
The border-left property lets you simultaneously set the width, style, and color of an element’s left border. Any omitted values will revert to their initial values.

Example:

	P {border-left: medium solid #800000}

If you are using a CSS-enabled browser, this paragraph has a medium, solid, maroon left border.

Border Left Width
{border-left-width: XXunits/thin/medium/thick}
The border-left-width property lets you set the width of an element’s left border.

It is illegal to use negative values for border-left-width. Different Web browsers interpret thin, medium, and thick differently, but the width of thin is always smaller than medium, which is always smaller than thick.

The border-left-width property should be used in conjunction with the border-style property to ensure that CSS-enabled browsers process it correctly.

Example:

	P {border-left-width: 50pt}

If you are using a CSS-enabled browser, this paragraph has a 50-point-wide left border.

Border
{border: width style color}
The border property lets you set the width, style, and color of all four of an element’s borders simultaneously. Any omitted values will revert to their initial values.

Example:

	H1 {border: thin solid blue}

If you are using a CSS-enabled browser, this headline has a thin, solid, blue border.

	H1 {border: 10px double #32cd32}	

If you are using a CSS-enabled browser, this headline has a 10-pixel-wide, double, lime green border.

Margin Top
{margin-top: XXunits/%}
The margin-top property lets you set the margin width of the top margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the top margin width using the height of the element’s containing block. Negative values for margin widths can be used.

Example:

	H1 {margin-top: 6cm}

If you are using a CSS-enabled browser, this headline has a 6-centimeter-tall top margin.


Margin Right
{margin-right: XXunits/%}
The margin-right property lets you set the margin width for the right margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the right margin width using the width of the element’s containing block. Negative values for margin widths can be used.

Example:

	H1 {margin-right: 125pt}

If you are using a CSS-enabled browser, this headline has a 125-point-wide right margin.


Margin Bottom
{margin-bottom: XXunits/%}
The margin-bottom property lets you set the margin width for the bottom margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the bottom margin width using the height of the element’s containing block. Negative values for margin widths can be used.

Example:

	H1 {margin-bottom: 2in}

If you are using a CSS-enabled browser, this headline has a 2-inch-tall bottom margin.


Margin Left
{margin-left: XXunits/%}
The margin-left property lets you set the margin width for the left margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the left margin width using the width of the element’s containing block. Negative values for margin widths can be used.

Example:

	H1 {margin-left: 5em}

If you are using a CSS-enabled browser, this headline has a 5-em-wide left margin.


Margin
{margin: XXunits/%}
The margin property lets you set the margin width of all four of an element’s margins simultaneously.

Margin width is the transparent space around an element. It can be specified using absolute or relative units. Relative units calculate the margin width using the width of the element’s containing block. Negative values for margin widths can be used.

You can enter one to four values to set different widths for different margins of an element. If there is one value, all four margins are the same width. If there are two values, the first value sets the top and bottom margins, and the second value sets the left and right margins. If there are three values, the first value sets the top margin, the second sets the left and right margins, and the third sets the bottom margin. If there are four values, the first sets the top margin, the second the right margin, the third the bottom margin, and the fourth the left margin.

Example:

	H1 {margin: 100px}

If you are using a CSS-enabled browser, this headline has a 100-pixel-wide margin surrounding it.





	H1 {margin: 2cm 1cm 3cm}	

If you are using a CSS-enabled browser, this headline has a 2-centimeter-tall top margin, 1-centimeter-wide right and left margins, and a 3-centimeter-tall bottom margin.





	H1 {margin: 25%}	

If you are using a CSS-enabled browser, the headline has a margin that is a quarter of the width of this browser window.

Padding Top
{padding-top: XXunits/%}
The padding-top property lets you set the top padding width of an element’s content area.

Padding width can be specified using absolute or relative units. Relative units calculate the top padding width using the height of the element’s containing block. It is illegal to use negative values for padding widths.

Example:

	H1 {padding-top: 7em}

If you are using a CSS-enabled browser, this headline has 7-em-tall top padding.

Padding Right
{padding-right: XXunits/%}
The padding-right property lets you set the right padding width of an element’s content area.

Padding width can be specified using absolute or relative units. Relative units calculate the right padding width using the width of the element’s containing block. It is illegal to use negative values for padding widths.

Example:

	H1 {padding-right: 1in}

If you are using a CSS-enabled browser, this headline has 1-inch-wide right padding.

Padding Bottom
{padding-bottom: XXunits/%}
The padding-bottom property lets you set the bottom padding width of an element’s content area.

Padding width can be specified using absolute or relative units. Relative units calculate the bottom padding width using the height of the element’s containing block. It is illegal to use negative values for padding widths.

Example:

	H1 {padding-bottom: 50pt}

If you are using a CSS-enabled browser, this headline has 50-point-tall bottom padding.

Padding Left
{padding-left: XXunits/%}
The padding-left property lets you set the left padding width of an element’s content area.

Padding width can be specified using absolute or relative units. Relative units calculate the left padding width using the width of the element’s containing block. It is illegal to use negative values for padding widths.

Example:

	H1 {padding-left: 5cm}

If you are using a CSS-enabled browser, this headline has 5-centimeter-wide left padding.

Padding
{padding: XXunits/%}
The padding property lets you set the padding width of all four sides of a content area simultaneously.

Padding is the space between an element’s content area and its border. Padding is not transparent, the padding area uses the element’s background as its background. Padding width can be specified using absolute or relative units. Relative units calculate the padding width using the width of the element’s containing block. It is illegal to use negative values for padding widths.

You can enter one to four values to set different widths for different sides of the content area. If there is one value, all four sides are the same width. If there are two values, the first value sets the top and bottom padding widths, and the second value sets the left and right padding widths. If there are three values, the first value sets the top padding width, the second sets the left and right padding widths, and the third sets the bottom padding widths. If there are four values, the first sets the top padding width, the second the right padding width, the third the bottom padding width, and the fourth the left padding width.

Example:

	H1 {padding: 30px}

If you are using a CSS-enabled browser, this headline is surrounded by 30-pixel-wide padding.




	H1 {padding: .25cm 1.5cm 3m 5cm}	

If you are using a CSS-enabled browser, this headline has 1-centimeter-wide top padding, 2 centimeter wide right padding, 3-centimeter-wide bottom padding, and 4-centimeter-wide left padding.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist