This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 5 years ago.
There is always a 6 pixels space below the image. I am using materialize instead of bootstrap.
<div class="container">
<div class="row">
<div class="no-padding">
<img src="https://i1.wp.com/testing.datahub.io/static/img/logo-cube03.png" />
</div>
</div>
body {
background-color: #2c3e50;
}
Also link to JSFiddle
My code is very simple, even I clean all of the other things.
When I inspect on div class="no-padding" it shows 486 pixels and when I inspect on the img it shows 480 pixels.
I want to remove the 6 pixels space.
Adding display: block; to the image is one fix.
See also : What is the gap or extra space below image?
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I'm Coding a sign in/sign up website, the css is very basic at this time along with basic js (I plan on polishing css). But I want to get the basic css done before working on html, one element of my website is an h3 element that I want to have a margin that pushes from the bottom of one of the selection divs but the margin is pushing from the top of the body rather than the containing div.
<div id="container">
<div id="leftFloat" class="50%">sign in</div>
<div id="rightFloat" class="50%">sign up</div>
<div id="rightFloat" class="50%">
<h2 id="selection" class="margin: 50px;">Pushes the container down rather than pushing itself down</h2>
</div>
</div>
This is what i want When Using The Margin
This is what i get when using the margin
Use clear:both for h2 as shown below:
h2{
clear: both;
}
This question already has answers here:
How do nested vertical margin collapses work?
(3 answers)
Closed 5 years ago.
I am making the footer of my WP custom theme. I have footer div(inside which I place components). I also have a logo div(where my logo is). I need distance from 12px between the begening of the footer div till the logo div.
I am using this:
<div class="footer">
<div class="footerlogo">
<img id="pic" src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
</div> .......
.footerlogo{ margin-top:30px;}
It doesnt show any differance. WHat is the proper way of doing that?
enter image description here
You could use padding on the footer div, for example:
.footer {
padding-top: 12px;
}
This would add space between both the .footer and .footerlogo div elements.
https://jsfiddle.net/ss7Lp2nd/
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
I want a parent div to be the height of the child image, like so:
<div class="container one">
<img src="http://placehold.it/250x250" />
</div>
The div should be exactly 250px tall. For Illustration, I created a JSFiddle here.
Now what is actually happening in FF and Chrome is that the div is just a bit taller, maybe 3 to 5 pixels.
I would like to avoid having to do nesting with unnecessary purely cosmetic markup like
<div class="container one">
<div class="inner">
<img src="http://placehold.it/250x250" />
</div>
</div>
or similar.
I feel like this is horribly obvious but I just can't make any sense of it.
<img> is an inline element and adds that extra space below due to that fact. Fix it with
img {
display: block
}
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
Closed 9 years ago.
Problem image:
Well, how can you see, there's a border, that blue line below the black image, I need to remove it, but I can't, I don't know how to do it. I need some solutions.
<div align="center" style="background-color:#00F;">
<img src="images/topimage.png">
</div>
<div>
<img src="images/topimage bottomborder.png" style="width:100%;height:9px;">
</div>
Above's the code.
Images are by default inline elements, so there, again by default, is space between the bottom edge of an image and the bottom edge of its container.
img {
display: block
}
Alternatively, this should also work:
img {
vertical-align: top
}
Us an appropriate selector.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS: wrap text around a bottom-right div?
Is it possible to have 2 layers, one with text, one an image, and the text wraps around the image?
give to the div2 a float: right
<div id="div1">
<div id="div2">
</div>
</div>
#div2{float:right;}
Need not to add extra div to place image.
HTML
<div><img src="" />
Content here
</div>
CSS
div{width:450px; text-align:justify}
div img{float:right; margin-left:10px}
DEMO