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

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -