Get rid of space underneath inline-block image
Write vertical-align:top;
. Write like this:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Check this http://jsfiddle.net/dJVxb/4/
Remove bottom space in display inline-block
Set vertical-align: top;
on .imagen
body { margin: 0;}
#contenedor { width: 500px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; background-color: black;}
.imagen { vertical-align: top; width: 120px; height: 120px; display: inline-block;}
<div id="contenedor"> <div class="imagen" style="background-color:blue"></div> <div class="imagen" style="background-color:green"></div> <div class="imagen" style="background-color:orange"></div> <div class="imagen" style="background-color:brown"></div> <div class="imagen" style="background-color:red"></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
.
White space below image inside inline-block div
vertical-align
should be used in the element where you've used inline-block
try this, it will fix your problem
How can I remove the space below the image?
Image is a inline element. you should do this (add vertical-align
and display
block element):
img{
display: inline-block;
vertical-align: top;
}
How to remove space above and below the in-line block elements?
ul
has by default margin
and padding
, so reset it
body { padding: 0; margin: 0; font-family: sans-serif;}header { background: #00795f; width: 100%; padding: 40px 0; /* 40px top and bottom, 0px left and right */ color: white; text-align: center;}nav { background-color: #43a286; color: white; overflow: hidden; padding: 0px; text-align: center; margin: 0;}ul { /* padding: 0; you may need only the margin */ margin: 0}a { text-decoration: none; color: inherit;}nav ul li { font-size: 16px; display: inline-block; padding: 20px; border: 3px solid black;}ul li:hover { background-color: #399077;}section { line-height: 1.5em; font-size: 1.5em; padding: 40px; width: 75%; margin: 0 auto;}
<header> <h1>Loving it more everyday</h1> </header> <nav> <ul> <li> <a href="#" target="_blank"> Home </a> </li> <li> <a href="#" target="_blank"> About </a> </li> <li> <a href="#" target="_blank"> Blog </a> </li> <li> <a href="#" target="_blank"> Shop </a> </li> <li> <a href="#" target="_blank"> Gallery </a> </li> <li> <a href="#" target="_blank"> Contact </a> </li> </ul> </nav> <section> When you try your best, but you don't succeed. When you get what you want, but not what you need. When you feel so tired, but you can't sleep. Stuck in reverse. And the tears come streaming down your face. When you lose something you can't replace.When you love someone, but it goes to waste. Could it be worse? Lights will guide you home. And ignite your bones. And I will try to fix you. And high up above or down below. When you're too in love to let it go. But if you never try you'll never know. Just what you're worth. When you try your best, but you don't succeed. When you get what you want, but not what you need. When you feel so tired, but you can't sleep. Stuck in reverse. And the tears come streaming down your face. When you lose something you can't replace.When you love someone, but it goes to waste. Could it be worse? Lights will guide you home. And ignite your bones. And I will try to fix you. And high up above or down below. When you're too in love to let it go. But if you never try you'll never know. Just what you're worth </section>
How to get rid of white-spaces in an inline-block design of images?
When using inline-block, I always comment out the whitespace:
<!-- the usual inline-block thing...
--><div class="inlineBlockThing">foo</div><!--
--><div class="inlineBlockThing">bar</div><!--
--><div class="inlineBlockThing">baz</div><!--
... all done -->
That gets rid of the gaps and keeps it much more readable.
Image inside div has extra space below the image
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
- adjust the
vertical-align
of the image to position it elsewhere (e.g. themiddle
) or - change the
display
so it isn't inline.
div { border: solid black 1px; margin-bottom: 10px;}
#align-middle img { vertical-align: middle;}
#align-base img { vertical-align: bottom;}
#display img { display: block;}
<div id="default"><h1>Default</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
<div id="align-middle"><h1>vertical-align: middle</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div> <div id="align-base"><h1>vertical-align: bottom</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>
<div id="display"><h1>display: block</h1> The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
Related Topics
Using HTML in Jquery UI Autocomplete
Workaround for Href="File://///..." in Firefox
Heading with Horizontal Line on Either Side
How to Maintain Scroll Position in MVC
Which Elements Support the ::Before and ::After Pseudo-Elements
CSS Speech Bubble with Box Shadow
Why Does File Upload Not Work Without the Enctype Property
Min-Width and Max-Height for Table Attributes
Hide HTML Horizontal But Not Vertical Scrollbar
Bootstrap 3: Push/Pull Columns Only on Smaller Screen Sizes
CSS Grid - Maximum Number of Columns Without Media Queries
Img Tag Displays Wrong Orientation
Declare Variable in a Play2 Scala Template
Remove Blur Effect on Child Element
Deploying Just HTML, CSS Webpage to Tomcat