Why is there an unexplainable gap between these inline-block div elements? [duplicate]

Answer 1

inline-block automatically sets a default white-space like everyone is saying. (This is due to the elements "inline" properties, the same as spacing between words in a string of text in your HTML markup. This is why removing white-space in the markup also works.) The easiest fix is to just float the container. (eg. float: left;) On another note, each id should be unique, meaning you can't use the same id twice in the same HTML document. You should use classes instead, where you can use the same class for multiple elements.

.container {
    display: inline-block;
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}