IronRocket
Technical User
I'm just doing an experiment on padding and margin. I have two <h3> tags that have margin-top (bottom, left) at 0 px with the border set at 1px. The two <h3> tags have their top and bottom borders touching each other. Then I have a third <h3> tag that has a class like this...<h3 class="margin">. Yet the h3.margin is no different from the other two selectors. The third <h3> header has space between the second <h3> border. I have everything set at 0px - just wondering why the third <h3> tag will not border the second one. Here is the script:
<html>
<head><title>CSS Practice</title>
<style type="text/css">
p {font-size:20px}
p.one{color:blue;font-size:16px}
p.two{color:red;font-size:16px}
h3 { padding-left:0px;
padding-top:0px;
padding-bottom:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
border:1px solid red}
h3.margin{
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
border:1px solid red}
</style>
</head>
<body>
<p style="background:blue;color:white">This has a blue background w/ white font</p>
<p style="background: url(' is working w/ single quotes around the URL</p>
<p style="background: url(This is workin'</p>
<p>
This is a font of 20px.
</p>
<p class="one">
This is class one which the color is blue
</p>
<p class="two">
This is class two which the color is red
</p>
<h3>This is just a regular "h3" header tag...</h3>
<h3>This is header three w/ the padding at 15px</h3>
<br />
<h3 class="margin">This is header three w/ the margin at the same as the padding</h3>
</body>
</html>
<html>
<head><title>CSS Practice</title>
<style type="text/css">
p {font-size:20px}
p.one{color:blue;font-size:16px}
p.two{color:red;font-size:16px}
h3 { padding-left:0px;
padding-top:0px;
padding-bottom:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
border:1px solid red}
h3.margin{
padding-left:0px;
padding-top:0px;
padding-bottom:0px;
margin-left:0px;
margin-top:0px;
margin-bottom:0px;
border:1px solid red}
</style>
</head>
<body>
<p style="background:blue;color:white">This has a blue background w/ white font</p>
<p style="background: url(' is working w/ single quotes around the URL</p>
<p style="background: url(This is workin'</p>
<p>
This is a font of 20px.
</p>
<p class="one">
This is class one which the color is blue
</p>
<p class="two">
This is class two which the color is red
</p>
<h3>This is just a regular "h3" header tag...</h3>
<h3>This is header three w/ the padding at 15px</h3>
<br />
<h3 class="margin">This is header three w/ the margin at the same as the padding</h3>
</body>
</html>
