Menu
I'm a new comer to web designing. I created my web page layout using CSS and HTML as below. The problem is even though i set the margin to 0, the upper margin is not setting to 0 and leaves some space. How can i clear this white space?
Screen Shot of the problem
Style Sheet
<style type="text/css"> body{ margin:0 auto; background:#F0F0F0;} #header{ background-color:#009ACD; height:120px;} #header_content { width:70%; background-color:#00B2EE; height:120px; margin:0 auto; text-align:center;} #content{ width:68%; background-color:#EBEBEB; margin:0 auto; padding:20px;} </style> HTML
<body> <div id="header"> <div id="header_content"> <p>header_content</p> </div> </div> <div id="content"> Main Content </div> </body> Here's the whole file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Book Shop</title> <style type="text/css"> html, body, #header { margin: 0 !important; padding: 0 !important; } body{ margin:0; padding: 0; background:#F0F0F0;} #header{ background-color:#009ACD; height:120px;} #header_content { width:70%; background-color:#00B2EE; height:120px; margin:0 auto; text-align:center;} #content{ width:68%; background-color:#EBEBEB; margin:0 auto; padding:20px;} body { margin: 0; padding: 0; } </style> </head> <body> <div id="header"> <div id="header_content"> <p>header_content</p> </div> </div> <div id="content"> Main Content </div> </body> </html> 
223
Block. First things first, each of the elements above are blocks and have set margin: 0 auto, but it does not work since blocks have width equal to 100% by default (the first example). The block covers the whole page and therefore cannot be centered.
margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally.
Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
Try...
body { margin: 0; padding: 0; } jsFiddle.
Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
