-
Details
This makes a grey rectangle
<![CDATA[
<div style="background-color:#eeeeee">
<p>
The background is grey.
</p>
</div>
]]>
Margins / border / padding
Type in the following code.
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
div.mylovelydiv
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="mylovelydiv">This is the contents of the div.</div>
</body>
</html>
]]>
Adjust the values in padding, border and margin.
Border values
The code below shows different border values.
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
div.mylovelydiv {
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
div.mygreatdiv {
border-style:dotted;
border-width:5px;
}
div.dasheddiv {
border-style:dashed;
border-width:5px;
}
div.doublediv {
border-style:double;
border-width:5px;
}
</style>
</head>
<body>
<div class="mylovelydiv">This is the contents of the div.</div>
<div class="mygreatdiv">This is a great div.</div>
<div class="dasheddiv">This is a dashed div.</div>
<div class="doublediv">This is a dashed div.</div>
</body>
</html>
]]>
Outline
The outline surrounds the element
<![CDATA[
<head>
<style>
div.blahdiv {
border-color:#0000ff;
border-style:solid;
border-width:5px;
outline-color:#ff0000;
outline-style:solid;
}
</style>
</head>
<body>
<div class="blahdiv">Blah blah blah.</div>
</body>
]]>
Margin
Examples of margin values
<![CDATA[
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
]]>
Padding values
<![CDATA[
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
]]>