display: inline-block extra margin
The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing: -1;
on the surrounding container.
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
.
Why display=inline-block adds uncontrollable vertical margins
When you make the .txt
element inline-block
, it is taken into the text flow of the parent .btn
element. At that point, the line-height of .btn
kicks in, which is larger than the height of the .txt
element.
So, add .btn {line-height: 10px;}
(for example) and your problem is fixed. I saw you already tried to influence the line-height of the inner .txt
element, so you were pretty close with your attempts. Adjusting the font-size would work as well, since the default line-height is formula-based on the font-size. Anyway, the key is to do that on the parent element, not the child element.
You don't have this problem when you make the inner element a block
, because then there's no text-like content, so there's no line-height applied at all.
Display inline-block generates a margin-bottom that i can't remove
The space you are seeing is the space given to the descender height of letters like a lowercase y or g when an element's display value is set to inline-block;
. You are essentially treating an element like it is text when you set it to display: inline-block;
.
To fix, remove display: inline-block;
from your .posts
DIV. It doesn't need it for the layout you have.
Strange margin on `display:inline-block`-elements
Write font-size:0;
. Like this:
#container{
width:300px;
border:1px solid black;
font-size:0;
}
Check this http://jsfiddle.net/y7L7q/1/
OR
Write your mark like this:
<div id="container">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
Check this http://jsfiddle.net/y7L7q/2/
Display: Inline block - What is that space?
The space is in the HTML. There are several possible solutions. From best to worst:
- Remove the actual space in the HTML (ideally your server could do this for you when the file is served, or at least your input template could be spaced appropriately) http://jsfiddle.net/AWMMT/2/
- Use
float: left
instead ofdisplay: inline-block
, but this has undesirable effects on t he height: http://jsfiddle.net/AWMMT/3/ - Set the container's
font-size
to 0 and set an appropriatefont-size
for the internal elements: http://jsfiddle.net/AWMMT/4/ -- this is pretty simple, but then you can't take advantage of relative font size rules on the internal elements (percentages, em)
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>
Can't get rid of spaces between inline-block elements
put the close tag of one and the open tag of the next element on the same line:
<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>
Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.
Inline-Block inside Inline-block Invisible Margin
Each inline or inline-block element on its own line (like your :after
) element, will behave like a line of text, and is therefore subject to the line-height, vertical alignment and baseline of whatever font and font-size you've set on the parent (24px).
While it requires an extra element, your initial example solution of wrapping the text in its own element, applying a 0 font-size to parent, and applying the 24px font-size only to the text element (and therefore to that first line only), is the best solution if you don't want to resort to hacks such as negative margins or negative line-heights.
This is a summary of typographic CSS properties as they would apply to inline or inline-block elements: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Related Topics
What to Use in Place of ::Ng-Deep
How to Vertically Center a Container in Bootstrap
Should Ol/Ul Be Inside ≪P≫ or Outside
Why Are Bootstrap Tabs Displaying Tab-Pane Divs With Incorrect Widths When Using Highcharts
How to Get Centered Content Using Twitter Bootstrap
Do You Put Schema Microdata Meta Tags in the HTML Body
How to Overcome the HTML Form Nesting Limitation
How to Add Default Value For HTML ≪Textarea≫
The Reference to Entity "Foo" Must End With the ';' Delimiter
How to Create a Marquee Effect
Change Select List Option Background Colour on Hover
Base64 Encoded Images in Email Signatures
How to Make an HTML Button Not Reload the Page
Using HTML and Local Images Within Uiwebview
How to Apply Hovering on HTML Area Tag