Why does this div have margin

Question

In the example above, logo has a right margin and I can't put menu near it without resizing it(it should be 100x100) or it being pushed under it. Where did the margin came from and how can I get rid of it?

Code as 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;
}

inline-boxes behaves like letters or words, white space in code are seen at screen like space in between words. remove that space from code to find out http://jsfiddle.net/6CQUT/2/ — G-Cyrillus, Jun 21 '14 at 10:01
float, do not indent HTML (or minify it), set and reset font-size to 0/1rem ... there is many tutorials about this side effect unexpected by beginners :) in case you missed from previus comment : http://jsfiddle.net/6CQUT/2/ — G-Cyrillus, Jun 21 '14 at 10:02
float is a way to avoid to deal with these white space from code :) — G-Cyrillus, Jun 21 '14 at 10:10
just remove `display:inline-block;` for both #logo and #menu and put `float:left;` — Grish, Jun 21 '14 at 10:10
But then how do I put them on the same line? They would occupy block space, like the whole line. — George Irimiciuc, Jun 21 '14 at 10:12
I thought that is the point, showing logo and menu on one line. — Grish, Jun 21 '14 at 10:19

score 2 · Accepted Answer · edited May 23 '17 at 10:27

As i mentionned in my comments, you are dealing with white-space coming from your HTML code when set element as inline-boxes.

There s many ways, and one example provided was to remove it from code . logo</div><div id="menu" as shown here : http://jsfiddle.net/6CQUT/2/

But the best, i guess is to link to some tutorials to understand what is going on (links picked up from a search engine :) ):

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://davidwalsh.name/remove-whitespace-inline-block

How to remove the space between inline-block elements?

score 1 · Answer 2 · answered Jun 21 '14 at 10:14

One option is to keep display: inline-block and add this: http://codepen.io/pageaffairs/pen/fKkbE

#header {
  word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
  display:table;/* Webkit Fix */
}

#header div {
  word-spacing:0; /* reset from parent*/
}

score 0 · Answer 3 · answered Apr 07 '20 at 15:20

0

I had the same issue. In the css margin: -2px; seemed to solve it for me.

answered Apr 07 '20 at 15:20

Joe Giusti

159
1
3

Why does this div have margin

3 Answers3