Borders, Margins and Padding
- To work with the border-style property.
- To work with the border-color property.
- To work with the border-width property.
- To work with the border property.
- To work with the margin property.
- To work with the padding property.
Getting Started
The following diagram shows how margins, borders, and padding affect the width and height of an element.
As the diagram shows, margins, borders and padding increase the amount of space that an element takes up. (see footnote) For example, the width of the div above is set to 160 pixels. On all four sides, the div has 15 pixels of padding, a 10-pixel border, and a 20-pixel margin. The entire width of the element inclusive of its padding, border and margin is 250 pixels (160px + (2 * (15px + 10px + 20px))). This becomes important when using positioning to layout pages.
The code for the page shown above follows.
Code Sample: BordersMarginsAndPadding/Demos/Diagram.html
<html>
<head>
<title>Diagram</title>
</head>
<body>
<div style="margin: 20px;
border: 10px solid black;
padding: 15px;
background: red;
text-align:center;
color: white;
width: 160px;">
<img src="Images/block.gif"/>
</div>
<img src="Images/pixel.gif" style="margin-left:45px; width:160px; height:4px;"/>
</body>
</html>
Borders
Border-style
The border-style property is used to specify whether an element has a border or not and, if it does, how that border should appear. Possible values are listed below.
- none
- dashed
- dotted
- double
- groove
- inset
- outset
- ridge
- solid
Code Sample: BordersMarginsAndPadding/Demos/BorderStyles.html
<html>
<head>
<title>CSS Border Styles</title>
<style type="text/css">
hr {width: 50%; margin-top: 10px; margin-bottom: 10px;}
div {border-width: 4px}
</style>
</head>
<body>
<h1>CSS Border Styles</h1>
<div style="border-style: dashed;">border-style: dashed</div>
<hr/>
<div style="border-style: dotted;">border-style: dotted</div>
<hr/>
<div style="border-style: double;">border-style: double</div>
<hr/>
<div style="border-style: none;">border-style:none</div>
<hr/>
<div style="border-style: groove;">border-style: groove</div>
<hr/>
<div style="border-style: hidden;">border-style: hidden</div>
<hr/>
<div style="border-style: inset;">border-style: inset</div>
<hr/>
<div style="border-style: outset;">border-style: outset</div>
<hr/>
<div style="border-style: ridge;">border-style: ridge</div>
<hr/>
<div style="border-style:solid;">border-style:solid</div>
</body>
</html>
The above code will render the following:
Specifying Border-style by Side
Each side of an element can have a different border style. The properties for this are listed below.
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
Border-color
The border-color property is used with border-style to specify the color of the border. Its value can be any valid color as described in About Color Values.
selector {
border-style:value;
border-color:value;
}
Specifying border-color by Side
Each side of an element can have a different border color. The properties for this are listed below.
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
Border-width
The border-width property is used with border-style to specify the width of the border on all four sides of an element. All the units of measurement can be used. In addition, the border width can be defined using the following relative terms.
- thin
- medium
- thick
The border-width property will have no effect unless the element has a border-style defined either in a style sheet or by the user agent (e.g, browser).
selector {
border-style:value;
border-width:value;
}
Specifying border-width by Side
Each side of an element can have a different border width. The properties for this are listed below.
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
Border
The border property is a shortcut property for specifying the width, style, and color in one step. There are similar shortcut properties for each border side: .
- border-top
- border-right
- border-bottom
- border-left
selector {
border: width style color;
}
As the code below shows, both block and inline elements can have borders.
Code Sample: BordersMarginsAndPadding/Demos/Borders.html
<html> <head> <title>CSS Borders</title> </head> <body> <h1>CSS Borders</h1> <h2>Border Width, Style and Color</h2> <div style="border-width:1px; border-style:solid; border-color:#ff6600;"> border-width:1px;<br /> border-style:solid;<br /> border-color:#ff6600; </div> <hr/> <div style="border-width:thick; border-style:dotted; border-color:#ff6600;"> border-width:thick;<br /> border-style:dotted;<br /> border-color:#ff6600; </div> <hr/> <div style="border-top-width:thick; border-right-width:thin; border-bottom-width:thin; border-left-width:thick; border-style:dashed; border-color:#ff6600;"> border-top-width:thick;<br /> border-right-width:thin;<br /> border-bottom-width:thin;<br /> border-left-width:thick;<br /> border-style:dashed;<br /> border-color:#ff6600; </div> <hr/> <div style="border:5px solid #ff6600"> border:5px solid #ff6600 </div> <hr/> <div>Inline content can also have a <span style="border:2px solid #ff6600">border</span> around it. </div> <div style="border:1px dotted #ff6600"> There is a bug in Internet Explorer 6 and earlier: Dotted 1px borders appear as dashed. </div> </body> </html>
The above code will render the following results.
Margin
The margin property is used to specify the margin around an element. It can be applied to both block and inline elements. Margins can be specified in number of units (e.g, 20px) or in percentage of the width of the containing element.
Code Sample: BordersMarginsAndPadding/Demos/Margin.html
<html>
<head>
<title>CSS Margin</title>
</head>
<body>
<h1>CSS Margin</h1>
<div style="background-color:#0066ff;
border:5px solid #ff99ff; padding:0px;">
<div style="background-color:#ff6600; border:2px solid black;
margin-top:30px; margin-right:30px;
margin-bottom:30px; margin-left:30px;">
margin-top:30px;<br />
margin-right:30px;<br />
margin-bottom:30px;<br />
margin-left:30px;
</div>
</div>
<hr/>
<div style="background-color:#0066ff;
border:5px solid #ff99ff; padding:0px;">
<div style="background-color:#ff6600;
border:2px solid black; margin:30px;">
margin:30px;
</div>
</div>
</body>
</html>
The above code will render the following results.
Specifying Margins by Side
Each side of an element can have a different margin. The properties for this are listed below.
- margin-top
- margin-right
- margin-bottom
- margin-left
Padding
The padding property is used to specify the padding between an element's edges and its content. It can be applied to both block and inline elements. Padding can be specified in number of units (e.g, 20px) or in percentage of the width of the containing element.
Code Sample: BordersMarginsAndPadding/Demos/Padding.html
<html> <head> <title>CSS Padding</title> </head> <body> <h1>CSS Padding</h1> <div style="background-color:#0066ff; border:5px solid #ff99ff; padding:0px;"> <div style="background-color:#ff6600; border:2px solid black; margin:0px; padding-top:30px; padding-right:30px; padding-bottom:30px; padding-left:30px;"> padding-top:30px;<br /> padding-right:30px;<br /> padding-bottom:30px;<br /> padding-left:30px; </div> </div> <hr/> <div style="background-color:#0066ff; border:5px solid #ff99ff; padding:0px;"> <div style="background-color:#ff6600; border:2px solid black; margin:0px; padding:30px;"> padding:30px; </div> </div> </body> </html>
The above code will render the following results.
Specifying Padding by Side
Each side of an element can have a different padding. The properties for this are listed below.
- padding-top
- padding-right
- padding-bottom
- padding-left
Exercise: Borders, Margin and Padding
In this exercise, you will continue to work on Stories.html by applying borders, margin and padding to different elements on the page.
- Open BackgroundsAndColors/Exercises/Stories.html, which you were working on in the last lesson and save it in the BordersMarginsAndPadding/Exercises directory.
- Modify the text properties of the different elements on the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with borders, margin and padding.
- When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.
Borders, Margins and Padding Conclusion
In this lesson of the CSS tutorial, you have learned to use CSS border, margin and padding properties.
Footnotes
-
Internet Explorer 5 and 5.5 on Windows handle border-width, margins and padding incorrectly. There is a famous hack called the "Box Model Hack," which is explained very well at http://tantek.com/CSS/Examples/boxmodelhack.html.