Wednesday, 15 July 2015

html - Why does this div have margin -



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