Skip to content

Instantly share code, notes, and snippets.

@ygrenzinger

ygrenzinger/weird.html

Created May 20, 2020 08:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ygrenzinger/d7446a3e655b50e7e5cb0534ae924bbd to your computer and use it in GitHub Desktop.
Save ygrenzinger/d7446a3e655b50e7e5cb0534ae924bbd to your computer and use it in GitHub Desktop.
Download ZIP
I don't understand this effet when I add a X in div
Raw
weird.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<style>
._40d43b0b {
display: inline-block;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px solid rgb(120, 120, 120);
}
._40d43b0b:hover {
border-color: rgb(255, 0, 0);
border-radius: 10px;
}
._68d33af4 {
height: 100px;
}
</style>
<div class="_68d33af4">
<span class="_40d43b0b"></span>
<span class="_40d43b0b">x</span>
<span class="_40d43b0b"></span>
</div>
</div>
</body>
</html>
@RobinBastiaan
Copy link

I agree that this is very wierd!

as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.
to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)

Source: https://stackoverflow.com/a/4053632/12355272

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment