Why is there an unexplainable gap between these inline-block div elements?
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.
Method 1 - Remove the whitespace from the markup
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>
Method 2 - Reset the 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.
Method 3 - Set the parent element to 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 { display: flex;}.parent > div { display: inline-block; padding: 1em; border: 2px solid #f00;}
<div class="parent"> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div></div>
Extra Space Between inline-block DIV Elements
You need to comment out the white space between the elements, like so:
<div class="tile-container">
<div class="tile-large">1</div><!--
--><div class="tile-wide">2</div><!--
--><div class="tile-small">3</div><!--
--><div class="tile-small">4</div><!--
--><div class="tile-small">5</div><!--
--><div class="tile-small">6</div><!--
--><div class="tile-wide">7</div><!--
--><div class="tile-large">8</div>
</div>
DEMO: http://jsfiddle.net/P7cbA/11/
Another way is to put the elements in the HTML in one line without any spaces between them, but this reduces the code readability:
<div class="tile-container">
<div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>
How to remove the space between inline/inline-block elements?
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0
to the parent element, and then declare a sensible font-size
on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0
.
Unexplained Space Between Divs
It's the automatic margin-before on the <p>
tag that is applied by most browsers. Set:
#black p {
margin: 0
}
and you'll see it go away.
Why does the extra space between two inline-elements get filled with background-color, but it doesn't for the space between two inline-block elements?
Your answer is within the specification.
For each inline (including anonymous inlines; see [CSS2] section 9.2.2.1) within an inline formatting context, ...
Any collapsible space immediately following another collapsible space—even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—is collapsed to have zero advance width. (It is invisible, but retains its soft wrap opportunity, if any.)
It's a bit complex but in the case of inline element the spaces will collapse into one space that will be inside the first inline element and not between both inline element. This is because you had a space at the end of your inline element. In other words, all the spaces will collapse into the first one and the position of the first space will decide about the visual.
Remove the space at the end of your inline elements and you will have a different result:
.div1 {
display: inline;
background-color: lightblue;
}
.div2 {
display: inline;
background-color: orange;
}
<div class="box">
<div class="div1"> Lorem ipsum </div>
<div class="div2"> Lorem ipsum </div>
</div>
<div class="box">
<div class="div1"> Lorem ipsum</div>
<div class="div2"> Lorem ipsum </div>
</div>
Unexpected space between two divs with equal width
that is because of the newline between your two divs. This should do the job
<div class="child child-1">ONE</div><div class="child child-2">TWO</div>
or
<div class="child child-1">ONE</div
><div class="child child-2">TWO</div>
HTML: Unexplained vertical gap between text-wrapped inline-block elements with an image?
You need vertical-align:top
specified on .keys
.
The gap between two inline-block span element
CSS:
span {
display: inline-block;
}
HTML:
<span>This will have</span>
<span>a gap between the elements</span>
<span>This won't have</span><span>a gap between the elements</span>
Gap between two div tags with display:inline-block
As the display short of inline, there is space between them as <b>Hello,</b> World
have space between them.
Because there is space between the tags
<div>Test</div>
<div>Test</div>
Test with
<div>Test</div><div>Test</div>
or
<div>Test</div><!--
--><div>Test</div>
How to delete white space between two div element when they display as inline-block
inline-block
leaves white-space
between elements.
Write elements on same line to avoid white-space.
Change
<div id="left">
left other elements goes here
</div>
<div id="center">
center other elements goes here
</div>
to
<div id="left">
left other elements goes here
</div><div id="center">
center other elements goes here
</div>
Related Topics
Shape With a Slanted Side (Responsive)
Applying an Ellipsis to Multiline Text
Angular: Using the Ternary Operator in HTML Template
Does Id Have to Be Unique in the Whole Page
How to Switch Two Divs in HTML
Are (Non-Void) Self-Closing Tags Valid in Html5
A Div With Auto Resize When Changing Window Width\Height
Hide Scroll Bar, But While Still Being Able to Scroll
Position: Sticky Buttons Not Working in Ie 11
Css When Inline-Block Elements Line-Break, Parent Wrapper Does Not Fit New Width
Why Don't Flex Items Shrink Past Content Size
How to Center Text (Horizontally and Vertically) Inside a Div Block
Can Multiple Different HTML Elements Have the Same Id If They'Re Different Elements
Why Not Use Tables For Layout in Html
Failed to Load Resource: the Server Responded With a Status of 404 (Not Found) CSS
How to Force Div Contents to Stay in One Line With HTML and CSS