Understanding How Paddings work

HTML-CSS
1

Tell us what’s happening:

I’m a bit confused. why is the text “padding” in both boxes not centered in the red and blue boxes?

Your code so far


<style>
.injected-text {
  margin-bottom: -25px;
  text-align: center;
}

.box {
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
}

.yellow-box {
  background-color: yellow;
  padding: 10px;
}

.red-box {
  background-color: crimson;
  color: #fff;
  padding-top: 40px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
}

.blue-box {
  background-color: blue;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 20px;
  padding-left: 40px;
}
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 13_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Mobile/15E148 Safari/604.1.

Challenge: Add Different Padding to Each Side of an Element

Link to the challenge:

2

You can set individual paddings like padding-top or padding-left. It will only be centered if you use padding: without any direction

3

Hello @Pearlsky! The text isn’t centered because the padding isn’t the same on all sides. With 40px on the top and 20px on the bottom it’s going to appear like there’s more space (gap) at the top.

You can see the same thing from left to right except since we’re dealing with very small amount of pixels it’s not as noticeable across a wide screen. It is however offset more to the right since the left side has 40px of padding.

4

hey @jfirestorm4 thank you so much. i just saw that now too.