Home/ Questions/Q 8544605
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T12:36:04+00:00

I have horizontally stacked divs using the following code below: .basic { width:100px; position:relative;

  • 0

I have horizontally stacked divs using the following code below:

.basic {
    width:100px;
    position:relative;
    display:inline-block;
    border: 1px solid red;
    text-align:center;
    margin:0;
    padding:0;
}

#container {
    white-space: nowrap;
    border: 1px solid black;
    width:300px;
    overflow:auto;
}

The ‘container’ has white-space:nowrap for stacking it’s children horizontally. However, the horizontal children have spaces to their right. Here’s a fiddle showing the demo. Inspecting box layout there doesn’t seem to be any margin/padding. But just some mysterious ‘dark matter’ pushing it out 😛

The queer thing is that the same code is used at different places in my application but this anomaly shows up in one place as shown in the image below:

enter image description here

Don’t worry about the garbled text on the top. I haven’t rotated the div 90 degrees CCW as yet 🙂
However, pay attention to the bottom part of the image. The textbox divs are stuck to each other whereas the ones on the top aren’t. They use the same CSS as above, but differ in structure. The top Div has two floats which are cleared by the div with the arrow towards the bottom. So no ‘uncleared’ floats there. Rather than posting the entire HTML/CSS I recreated the problem in the fiddle.

What I fail to understand is that even after having 0 margin/padding and display:inline-block for the child divs why is there still some space? I’m sure this has been asked quite a few times here but why would this happen once and not in another place? Besides, how best to ‘fix it’??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    display: inline-block places a margin to the right if there exists a whitespace between the current and the next element. This space is calculated as a product of 4px and the current font-size in ems. Notice the difference between the first and second rows in this fiddle: http://jsfiddle.net/MkasM/

    In your case, this can be controlled simply by setting margin-right: -4px since you haven’t changed the font-size.

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

    Also, it is good practice to give your elements ‘box-sizing: border-box’ if you haven’t already. It will contain the ‘padding’ and border-widths within the blocks so it wont interfere with the layout.
    To read: http://paulirish.com/2012/box-sizing-border-box-ftw/

    • 0