html - CSS - How to remove unwanted margin between elements? -
this seems common problem none of solutions found have worked me.
html
<html> <head> <link rel="stylesheet" href="c/lasrs.css" type="text/css" /> </head> <body> <div class="header"> <img src="i/header1.png"> </div> <div class="content"> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. nam cursus. morbi ut mi. nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. sed eleifend nonummy diam. praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.</p> </div> </body> </html> css
body { min-width: 950px; background-color: #ffffff; color: #333333; } .header { width: 950px; height: 171px; margin: 0px auto; padding: 0px; background-color: #cccccc; position: relative; } .content { width: 950px; margin: 0px auto; padding: 0px; background-color: #e3eef9; position: relative; } i deliberately broke image path , set background colour .header div see if touching. page looks like:
as can see i've tried setting padding , margins on both divs 0.
why there still gap?
this due following:
browsers automatically add space (margin) before , after each
<p>element. margins can modified css (with margin properties).
so try:
p { margin: 0px; } note: browsers add default styling on other elements too! can both useful , annoying in different situations. there 3 ways go this:
- completely remove default styles browsers might have. accomplished using reset stylesheet. popular 1 eric meyer’s css reset. if want go out , have completely clean start in browser, use meyer's technique. method preferred on using slow
*{ margin:0; padding:0; }reset approach (read here why) normalize stylesheet own defaults. large annoyance of webdesigners different browsers use different default styles. however, complete reset comes time-consuming trouble of redefining styles of elements. therefore, can normalize default styles of browsers using predefined set of consistent , sensible default styles. common approach use normalize.css (twitter, github , soundcloud use this!)
adjust defaults when necessary or consciously work around defaults. common way (not saying it's best way) work defaults know exist , adjust them when necessary. default styles there reason: can developers looks after. off? adjust styles accordingly. however, make sure use correct tags correct elements. example, instead of removing
<p>margins inline texts, should use<span>tag (no defaultmargin)
that should understand what's going on behind scenes.
Comments
Post a Comment