padding-top "bigger" than padding-bottom - html

Question

I don't understand why in this setup the padding-top is various times bigger than the padding-bottom. Tried tweaking stuff around to find the culprit property but so far nothing. I did notice, that I accidentally left a " after the spans, the issue was gone, but not sure how that relates.
https://jsfiddle.net/3n0yuzs3/1/
body
{
font-family: sans-serif;
}
#window
{
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container
{
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content
{
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
}
.snack_msg
{
padding-right: 200px;
float:left;
}
.snack_btn
{
color:#5fce49;
text-transform: uppercase;
letter-spacing:3px;
cursor:pointer;
float:right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>

Answer 1

The issue is with floating elements and not padding. As you can see below, you have equal padding in all the sizes :
And if you check well you will see also that you have a height equal to 0 because you have floating element and since the parent is not floating it will collapse (which means no height). To fix this you need to add oveflow:auto to #content.
body {
font-family: sans-serif;
}
#window {
background-color: black;
color: white;
display: flex;
flex-direction: column;
opacity: 1;
left: 50%;
bottom: 0px;
position: fixed;
width: auto;
height: auto;
min-width: 600px;
min-height: auto;
max-width: 80vw;
max-height: 80vh;
transform: translateX(-50%);
outline: 0px;
cursor: default;
z-index: 5000002;
zoom: 1;
}
#container {
overflow-y: auto;
overflow-x: hidden;
border: none;
outline: 0;
margin: 0;
flex-grow: 1;
}
#content {
font-size: 22px;
text-align: center;
overflow-wrap: break-word;
padding-top: 1.6em;
padding-bottom: 1.6em;
padding-left: 1.6em;
padding-right: 1.6em;
overflow: auto;
}
.snack_msg {
padding-right: 200px;
float: left;
}
.snack_btn {
color: #5fce49;
text-transform: uppercase;
letter-spacing: 3px;
cursor: pointer;
float: right;
}
<div id='window'>
<div id='container'>
<div id='content'>
<span class='snack_msg'>New message arrived</span>
<span class='snack_btn' onclick='open_snack_message()'>open</span>
</div>
</div>
</div>
Here is some usefull questions where you can gather more information and more ways to prevent this behavior:
How do you keep parents of floated elements from collapsing?
Why does 'overflow: auto' clear floats? And why are clear floats needed?