This question already has answers here:
Why does my image have space underneath?
(3 answers)
Closed 7 years ago.
How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?
http://jsfiddle.net/dJVxb/2/
HTML:
<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >
</div>
CSS:
#wrapper {
background:green;
}
img {
display:inline-block;
margin:0;
}
Write vertical-align:top;. Write like this:
img {
display:inline-block;
margin:0;
vertical-align:top;
}
Check this http://jsfiddle.net/dJVxb/4/
That added space is there to make room for descenders were there inline text as well. Descenders are parts of letters that reach down, like in 'y' and 'g'.
If you need to retain a vertical-align property of center or baseline, you can fix this by setting your line-height to 0.
Related
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Vertically-aligned inline-block element not perfectly centered within container
(2 answers)
Closed 6 months ago.
I have a div that contains an image and text. I'm trying to simply vertically align the text.
I've tried setting vertical-align: center; and line-height:90px, but neither seem to be having any effect.
If I remove the image, even just line-height:90px does the job, so I suspect it's something to do with the image affecting the baseline of the div.
If possible I'd prefer solutions without flexbox.
My code:
.menubuttons{
height:90px;
background-color: red;
font-size:30px;
/*my unsuccessful attempt at centering the text vertically*/
vertical-align: middle;
line-height:90px;
}
.menubuttons img{
height:50px;
margin:20px;
}
<div class="menubuttons"><img src='https://cdn-icons-png.flaticon.com/512/2111/2111806.png'/>Stack Overflow</div>
jsfiddle in case SO code snippet isn't added
Just add these two properties in .menubuttons
.menubuttons{ display:flex; align-items:center; }
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 11 months ago.
I have a block with inline divs wrapping inside.
I want to center that block inside it's container using margin auto (or any other ways).
Unfortunately it doesn't work.
There is a solution by using text-align center, but i don't want the inline-divs in the last line to be in the center.
or in other words:
how to get rid of the yellow marked space?
There was a similar question 6 years ago that didn't get a good solution, I ask again because css has advanced since then
span{
display:inline-block;
width:150px;
height:100px;
background-color:red;
margin:10px;
}
.inside{
margin:auto;
width:90%;
background-color:blue;
}
.outside{
border:solid 1px black;
}
<div class="outside">
<div class="inside">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
```
This question already has answers here:
CSS Margin Collapsing
(2 answers)
CSS Text Bottom Margin Ignored
(3 answers)
Closed 7 years ago.
I am using two divs, one on top with no content or height and the other below it with some content or just height. I wish to put some space between them and instead of using margin-bottom alone on the first div or margin-top alone on the second div I am evenly sharing the space between both, i.e. half the space on the first div's margin-bottom and half the sapce on the second div's margin-top. For some reason only one of the two seem to apply and the other is ignored.
Check out this example
http://jsfiddle.net/hkgq22x8/
body {
margin:0px;
}
.element1 {
margin-bottom:10px;
}
.element2 {
margin-top:10px;
border:1px solid #000;
height:30px;
}
<div class="parent">
<div class="element1"></div>
<div class="element2"></div>
</div>
try removing either margin-top on .element2 or margin-bottom on .element1, the space remains the same, but remove both and the space disappears.
This question already has answers here:
css single or multiple line vertical align
(8 answers)
Closed 8 years ago.
Please note the attached image/wireframe. How can I build this element with CSS. Where if there is one line of text it is vertically centered but also support 2 lines also being vertically centered?
You can accomplish this by making your wrapper div display:table: and your inner text div display:table-cell. See example below:
HTML:
<div class="wrapper">
<div class="inner">
One Line</br>
Two Line</br>
Three Line</br>
</div>
</div>
CSS:
.wrapper{
width:400px;
height:200px;
display:table;
background:brown;
}
.inner{
display:table-cell;
vertical-align:middle;
text-align:center;
}
FIDDLE:
http://jsfiddle.net/pgwL47oy/1/
This is already mentioned in a comment on your question, but usually the usage of display: table-cell; with vertical-align: middle; is what you're after.
The idea is to get the parent container to be displayed as a table with display: table;, and then the span or paragraph element you're using to contain those text nodes is given the above table-cell display with vertical-align.
It's worked for me before, should be worth a shot!
Here's a CSS Tricks article that could help you out further
Hope that helps! :)
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Remove white space below image [duplicate]
(9 answers)
Closed 9 years ago.
I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz.
HTML
<img src="http://placehold.it/150x150" />
CSS
a{
background: red;
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
img {
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
EDIT: I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks
The img element is inline by default. inline elements act as text and default to a vertical-align: baseline. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding vertical-align: bottom OR display: block.
It does this because it's an inline element. Change the display type
img {
display:block;
}
because the image is an inline element by default. Add display: block to your img rule and see.
In your case you need to add display:block, but to the image tag instead of the link tag.
add
img
{
display:block;
}