issue with "float: left" element with bordered block level element below - css

Question

I have an element that's floated left, followed by a paragraph element. The top of the paragraph is below the top of the floated element.
body {
margin: 20px;
padding: 0;
font: normal 85% arial, helvetica, sans-serif;
color: #000;
background-color: #fff;
}
.containingbox {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.floatleft {
float: left;
width: 100px;
height: 100px;
border: 2px solid #F63;
}
p.highlight { border: 5px solid #aaa; }
<div class="containingbox">
<div class="floatleft"></div>
<p class="highlight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
Why is the top of the paragraph not at the same level as the floated element? when I use firebug to check it(<p class="highlight">Lorem ipsum...</p>), seems there is margin-top and margin-bottom set for it, but there is no margin set in the CSS.

Answer 1

By default, some browsers give some of the common tags default CSS settings. All a <p> tag really is is a <div> with some extra margin/padding. This is because both are block elements. You will see default CSS on browsers on tags like <p>, <ul>, <h>, <th>, etc.
Simply give your paragraph a default margin and padding to prevent browsers from using defaults (or use a <div> instead. For example:
p.highlight{
margin: 0;
padding: 0;
border: 5px solid #aaa;
}

Answer 2

This is worked! Edit your CSS :
p.highlight { margin: 0; padding: 0; border: 5px solid #aaa; }
See this fiddle for full code. Hope this helps..

Answer 3

One of the main causes for the many positional differences between layouts in various browsers is due to the default stylesheet each browser applies to give styling to certain elements. This usually involves setting default margins and padding to some elements to make them behave in a certain way.
For instance, paragraph (p) tags will have a margin applied to them so that each paragraph is separated by vertical white space and do not run into each other. The same applies to many other tags including heading tags (h1 etc). The problem occurs because the amount of margin (or padding) applied to these elements is not consistent across browsers. On many occasions Mozilla/Firefox will add a top margin to the element as well as a bottom margin. IE will however only add a bottom margin. If you were then to view these two browsers side by side you would see that the alignment would be different due to the top margin applied by Mozilla which could make your design not line up as expected.
Default style sheet for HTML 4
You can use this styles to reset:
* {margin:0;padding:0}

Answer 4

Browsers have some default properties applied for some elements (ex: font-size=2em for h1 elements ), in this case, a margin for the <p> element
to get rid of this margin use:
p.highlight{ margin: 0; border: 5px solid #aaa; }