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.
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:
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?
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I have an image of 24x24 px inside an <a>, which is nested in a <div> having min-height:50px.
The bottom and top paddings of <a> element are 13px both.
So, height should be 24px(image height) + 13px(<a> padding-top) + 13px(<a> padding-bottom) = 50px right?
The problem is that the wrapper <div> is expanding its height to 54px, except when I define the vertical-align:middle for that image, then It's resized to 50px as desired.
Here is the code http://codepen.io/thyagosic/pen/JKYrjN
Removing the vertical-align: middle; may help to understand the problem
All images are inline elements by default and they have 4px space at the bottom. You should set 'vertical-align:top' or 'display: block' on them to remove this space.
I recommend putting images inside of links into divs (or setting display: block to the element)
<div class="menu">
<a href="#">
<div id="image">
<img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" />
</div>
</a>
</div>
Also padding/margin should be set for "block" elements
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 7 years ago.
I have 3 <img> elements in a div like this:
<div>
<img style="width: 10%;">
<img style="width: 80%;">
<img style="width: 10%;">
</div>
but the last image goes to next line. the box-sizing property of the div is border-box.
what is the problem?
Images and other inline elements are affected by whitespace in the html. This example shows your html with whitespace removed. http://jsbin.com/qoxedepifi/1/edit?html,css,output. You could set the display: inline-block; float:left which will ignore white-space. Or you could set the property white-space-collapse: discard; on the parent element.
img{float:left;}
Your can add float left on the images.