Default styling
By default, browsers style many HTML elements. Using margin, padding, font-weight, line-height, etc. (see default Firefox styles sheet).
The default margins on paragraphs create the gap between the three colored boxes on this page.
Because default styling is inconsistent across browsers, many authors "reset" default values (see undohtml.css, really undoing HTML, etc.). The shortest, but incomplete version, being:
* {
margin: 0;
padding: 0;
}My take on this is that we should set explicit values rather than resetting everything (see setting rather than resetting default styling).
UAs style form controls, so authors cannot rely on inheritance. They should always specify font-size, font-family, and line-height (with !important) as these properties influence the dimensions of these elements.
Using the universal selector (*) degrades performance.
Style all three boxes with:
line-height: 0;