I have two inline-block div
elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting them - What is going on?
CSS
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
}
This is what i want it to look like:
In this instance, your div
elements have been changed from block
level elements to inline
elements. A typical characteristic of inline
elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)
There are a few solutions that can be used to solve this.
Example 1 - Comment the whitespace out: (example)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Example 2 - Remove the line breaks: (example)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Example 3 - Close part of the tag on the next line (example)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Example 4 - Close the entire tag on the next line: (example)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
font-size
Since the whitespace between the inline
elements is determined by the font-size
, you could simply reset the font-size
to 0
, and thus remove the space between the elements.
Just set font-size: 0
on the parent elements, and then declare a new font-size
for the children elements. This works, as demonstrated here (example)
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size
is declared using em
units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline
elements.
display: flex
In some cases, you can also set the display
of the parent element to flex
. (example)
This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
.parent {_x000D_
display: flex;_x000D_
}_x000D_
.parent > div {_x000D_
display: inline-block;_x000D_
padding: 1em;_x000D_
border: 2px solid #f00;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div>text</div>_x000D_
<div>text</div>_x000D_
<div>text</div>_x000D_
<div>text</div>_x000D_
<div>text</div>_x000D_
</div>
_x000D_
It is incredibly unreliable to use negative margins to remove the space between inline
elements. Please don't use negative margins if there are other, more optimal, solutions.
You need to add
#container
{
display:inline-block;
position:relative;
background:rgb(255,100,0);
margin:0px;
width:40%;
height:100px;
margin-right:-4px;
}
because whenever you write display:inline-block
it takes an additional margin-right:4px
. So, you need to remove it.
simply add a border: 2px solid #e60000
; to your 2nd div tag CSS.
Definitely it works
#Div2Id {
border: 2px solid #e60000; --> color is your preference
}
Using inline-block
allows for white-space in your HTML, This usually equates to .25em (or 4px).
You can either comment out the white-space or, a more commons solution, is to set the parent's font-size
to 0 and the reset it back to the required size on the inline-block elements.
Found a solution not involving Flex, because Flex doesn't work in older Browsers. Example:
.container {
display:block;
position:relative;
height:150px;
width:1024px;
margin:0 auto;
padding:0px;
border:0px;
background:#ececec;
margin-bottom:10px;
text-align:justify;
box-sizing:border-box;
white-space:nowrap;
font-size:0pt;
letter-spacing:-1em;
}
.cols {
display:inline-block;
position:relative;
width:32%;
height:100%;
margin:0 auto;
margin-right:2%;
border:0px;
background:lightgreen;
box-sizing:border-box;
padding:10px;
font-size:10pt;
letter-spacing:normal;
}
.cols:last-child {
margin-right:0;
}
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 {
position: relative;
background: rgb(255, 100, 0);
margin: 0;
width: 40%;
height: 100px;
float: left;
}
Source: Stackoverflow.com