padding-top "bigger" than padding-bottom

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>

Is your goal just to center it? You have a ton of conflicting css which makes it hard to interpret what your end goal is. Other questions along with that... Is it supposed to be on top of the rest of the page? Is it supposed to shift the rest of the page around? — k2snowman69, Dec 24 '17 at 07:17
Sorry I left some info out. The point is to center it yes. And I just realized I had some wrong property, the bottom: is supposed to be 0px not 200px (I was running some tests), it's supposed to be at the bottom, which I fixed — madprops, Dec 24 '17 at 07:23

score 2 · Accepted Answer · answered Dec 24 '17 at 07:59

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?

padding-top "bigger" than padding-bottom

1 Answers1