html - Why does this div have margin -
http://jsfiddle.net/6cqut/
in illustration above, logo
has right margin , can't set menu
near without resizing it(it should 100x100) or beingness pushed under it. did margin came , how can rid of it?
code requested.
<body> <div id="header"> <div id="logo">logo</div> <div id="menu">menu</div> </div> <div id="cont">under</div> </body> #header { width:200px; height:100px; outline:solid 1px black; } #logo { display:inline-block; width:100px; height:100px; outline:solid 1px black; } #menu { display:inline-block; width:96px; height:96px; outline:solid 1px black; } #cont { outline:solid 1px black; width:200px; height:300px; }
as mentionned in comments, dealing white-space coming html code when set element inline-boxes.
there s many ways, , 1 illustration provided remove code . logo</div><div id="menu"
shown here : http://jsfiddle.net/6cqut/2/
but best, guess link tutorials understand going on (links picked search engine :) ):
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
http://davidwalsh.name/remove-whitespace-inline-block
how remove space between inline-block elements?
html css
No comments:
Post a Comment