Vertical Alignment For Two Inline-block Elements Not Working As Expected
Solution 1:
Anytime you are working with inline, inline-block, or table elements you will need to worry about vertical-align. As Arbin Shrestha said, the default value is baseline. What I don't understand is why you are using inline-block on both of these values anyway. The hr is full width, so changing the display property seems unnecessary.
If you are going to align multiple of those .test blue blocks in the top line, then set them all as display: inline-block; vertical-align: top;, but you shouldn't need to change the display value for the hr. If you leave the hr tag with its default display: block; value, then it should line up without messing with vertical-align and width. I hope that's what you're looking for. See here:
<!DOCTYPE html><html><head><metacharset="utf-8" /><title></title><style>body{
width: 100vw;
height: 100vh;
margin: 0;
background-color: black;
}
.test {
vertical-align: top;
display: inline-block;
width: 10%;
height: 100px;
background-color: lightblue;
}
hr{
border: thick solid lightgreen;
background-color: lightgreen;
margin: 0;
}
</style></head><body><divclass = "test"></div><divclass = "test"></div><divclass = "test"></div><hr/></body></html>Solution 2:
That is because all inline-block and inline elements have the "vertical-align" property set to "baseline" by default.
Look here for more details:
Post a Comment for "Vertical Alignment For Two Inline-block Elements Not Working As Expected"