Vertical-align of img interfering on div height [duplicate] - html

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

Related

image height not being respected when declared in percentage [duplicate]

This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I have the following HTML markup:
<div class="img-container"
<img src="images/" alt="" /> <!-- width: 100%; -->
</div>
<div class="img-container">
<img src="images/" alt="" /> <!-- width: 100%; -->
</div>
^^^ I have 2 images that are each nested inside of a div.
I have given the images a width of 100%, so they can take the full width of their parent. I have also given the img-container divs a width of 50%. Everything works fine and both the images take a width of 50% on the screen.
^^^ I never gave it a height value and this is how it shows up.
BUT when I actually give the height a value of 50% then it shows up like this:
The width of 50% is working but the height of 50% is not working?
BUT WHY? Giving it a height in pixels work properly, but when I assign it a height in percentage, then it doesn't apply that height... Why is that?
Does your parent element (of the images - img-container for instance) have a height defined?
Height in HTML / CSS takes some getting used to - it doesn't always work the way you'd expect.
If you look at something like this, it also has to do with the window size:
https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent

display: inline-block pushes my divs downwards [duplicate]

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>

sum of elements' width is 100% but the last element goes to next line [duplicate]

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.

Borders in <div> [duplicate]

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.

Background color being canceled by "float" [duplicate]

This question already has answers here:
Background color doesn't work after float
(3 answers)
Closed 9 years ago.
Explanation of code:
I'm creating a bar with three links. I made the bar, and tried to space out the links using the float, text-align, and width. (I'm trying to get the center link centered and the other two equidistant from it, and equidistant from the sides.) However, when I originally did it with 3 divs (the divs other than the "I" divs), the background color disappeared. So I messed with it and realized the float on the third link's div was causing the problem. So I added another div(the final div), and that worked with a little text. However, since I had to put text in it, it threw off my spacing. So I made a div on the other side(the first one) to balance it out. It still throws off my spacing without float however!
Question(s):
Why does having the floatproperty on the final div in a line cause the background color to disappear?
<div style="padding:0px;margin:0px;background-color:#3C3C3C;">
<div style="color:#3C3C3C;float:left;">
I
</div>
<div style="margin-left:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="width:50%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="margin-right:50px;width:20%;float:left;text-align:center;">
<a style="color:#3690B7;" href="">
Hello
</a>
</div>
<div style="color:#3C3C3C;float:right;">
I
</div>
</div>
You have to clear floating by adding for example another div below your final div:
<div style="clear:both;"></div>
Add overflow: auto to your outer <div>:
<div style="padding:0px; margin:0px; background-color:#3C3C3C; overflow: auto;">
The problem is that because you are floating elements within another element that isn't floated causes the wrapping element to be rendered as if it is empty.
To fix this, you can add some widths and a float:left; on the wrapping div
Check out this jsbin example which seems to be what you are looking for.
Basically your first div should be like;
<div style="padding:0px; margin:0px; background-color:#3C3C3C;float: left; width: 100%;">
Then you just need to change the widths, and remove any margins or padding.
p.s. You really should consider moving away from inline styles and use an external stylesheet with Id's and class names.