Eric P Eric P - 2 months ago 8
CSS Question

Adding any padding completely repositions inner div

I'm having an issue with positioning my inner content in my outer content. It seems that adding any padding throws off the positioning of the inner content completely.

Here's how it looks with no padding:
before padding

And here's how it looks with just 1px of padding-top:
after padding

From the Chrome inspection, I see it's doing the padding correctly but then repositioning the content near the bottom of the outer div when I would expect it to stay at the top.

Here is my CSS:



.outer-content {
margin-top: 20px;
background-color: pink;
padding-top: 20px;
width: 75%;
height: 40px;
}

.inner-content {
background-color: lightblue;
width: 75%;
height: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

<div class="outer-content">
<div class="inner-content">
<p>Here is some content</p>
</div>
</div>





Does anyone know why this is happening?

EDIT: I've figured out that removing the p tag around the text fixes it. But I'm still not sure why it behaves like that when you have a p tag.

Answer

It looked good when adding some HTML to the example. I would however change the CSS of the outer content. Take out the height and just add padding.

.outer-content {
  margin-top: 20px;
  background-color: pink;
  padding: 20px;
  width: 75%;
}
.inner-content {
  background-color: lightblue;
  width: 75%;
  height: 20px;
  margin: 0 auto;
  text-align: center;
}
<div class="outer-content">
  <div class="inner-content">Hello World</div>
</div>