Margin and padding
Margin
The blank space surrounding the external borders of an area is called margin.A style sheet can define the margins of <BODY>,<P>,<DIV> and <SPAN> sections.
His width can be expressed in pixel or percentage. For example:
BODY { margin: 2%; }
P { margin: 20px; }
Try this:
- Copy and paste the following code:
<HTML> <HEAD> <TITLE>Page margin</TITLE> <STYLE type="text/css"> BODY { margin: 80px; } P { margin: 20px; } </STYLE> </HEAD> <BODY> <H1>Margin test</H1> <P>This page has a margin.</P> </BODY> </HTML> - save it as margin.htm
- open it with your browser and see the result
- open margin.htm with Notepad and change the margin values (in pixel or percentage)
- see the result with your browser
Padding
The blank space surrounding the content of an area is called padding.A style sheet can define the padding of <P>,<DIV> and <SPAN> sections, and <TD> (table cells).
His width can be expressed in pixel or percentage. For example:
DIV.pad { padding: 2%; }
P { padding: 20px; }
A section without padding look like this...
A DIV section without padding...
A section with padding look like this:
A DIV section with padding...
Size settings
The width of padding and margin can be declared using:- A single value
All sides will have the same width.P { padding: 30px; } - Two values
the first value set the width of top and bottom side
the second value set the width of left and right side.BODY { margin: 40px 80px; } - -top -right -bottom -left values
To specify a width for each side:DIV { padding-top: 20px; padding-right: 20px; padding-bottom: 40px; padding-left: 40px; }
Next page :
how to set width and height of a section of the page.