html - why their is little margin in between two red regions of the page shown? -
shown in image below little gap between 2 red regions..
i have set margins , paddings 0 still giving 4px(i think) margin in between.. want know why appearing there...
two red regions given floating left , displayed inline-block.
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>learning...</title> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="_body"> <div id="_header"> <img src="images/header_index.jpg"/> <br /> <h3> view of uttrakhand camera come here , explore whole beauty...</h3> </div> <div id="_navigation"> <ul> <li><a href="htmlpage.html">destinations</a></li> <li><a href="htmlpage.html">culture</a></li> <li><a href="htmlpage.html">adventure</a></li> <li><a href="htmlpage.html">hotels</a></li> <li><a href="htmlpage.html">wild life</a></li> <li><a href="htmlpage.html">history</a></li> <li><a href="htmlpage.html">about</a></li> </ul> </div> <div id="_left"> left region of page.. </div> <div id="_content"> content region of page </div> <p id="background-viewer">..</p> </div> <pre>this written inside pre<a></a></pre> <script src="javascript.js"></script> </body> </html>
css
* { margin: 0px; padding: 0px; } #_left , #_content , #_navigation > ul { display:inline-block; } #_body { width:1200px; background:-webkit-linear-gradient(top,#0000cc,#3999ff); margin:0px auto; padding:0px; } /*here comes stylin gog header*/ #_header { } #_header > img { width:1200px; } #_header > h3 { border-bottom:3px solid black; font-weight:normal; text-align:center; text-transform:capitalize; padding:10px; } /*here ends styling of header*/ /*here comes styling of navigatin bar*/ #_navigation { margin:20px 20px 10px 20px; } /*here remains 960px navigation bar*/ #_navigation > ul { list-style-type:none; } #_navigation ul > li { width:135px; display: inline-block; padding: 5px 15px 5px 0px; font-family: verdana; font-size: 22px; vertical-align: middle; background:-webkit-linear-gradient(top,blue,aqua); border-bottom-right-radius:5px; border-top-left-radius:5px; } #_navigation ul > li:active { background:-webkit-linear-gradient(bottom,blue,aqua); } #_navigation { text-decoration: none; } #_navigation a:visited { color:black; } #_navigation a:active { color:black; } #_navigation a:focus { color:black; } /*here ends styling of _navigation*/ /*this part _left , _content*/ #_left { width:400px; padding:0px; background-color:red; min-height:100px; } #_content { width:795px; background-color:red; min-height:100px; } /*here ends styling of mid region*/
here of code.. javascript file has nothing didn't put here...
your divs incorporated in inline formating context , whitespace generated new line in html document
<div id="_left"> left region of page.. </div> <div id="_content"> content region of page </div>
you may avoid putting closing , ending tag of divs so
<div id="_left"> left region of page.. </div><div id="_content"> content region of page </div>
Comments
Post a Comment