CODEWITHSUNDEEP
htmlpadding
minorproblem
minorproblem

Reputation: 71

Padding doesn't seem to make sense

I am a bit confused as to how padding works. The code below is what I have from Free Code Camp (I am learning HTML). The padding in the blue box does not seem to be......even?

As in, if the bottom and right side of the element using the blue box class has 20px for bottom and right padding, why does it visually not seem to be 20 pixels for bottom and right padding? The two distances between the content and its border are clearly different....what is going on? Thank you for your time. 

.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: 20px 40px 20px 40px;
}

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

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}
<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>

Upvotes: 0

Views: 65

Answers (2)

MomasVII
MomasVII

Reputation: 5061

I hope these images help. You can see the padding being used with the additional styling of the centred text.

Press F12 in chrome and become familiar with the inspector. When you find your elements you can play around with the styling in real time to get a better idea of how it all works.

enter image description here enter image description here

Upvotes: 1

yqlim
yqlim

Reputation: 7080

Oh it is actually even.

I've created an demonstration for you:

.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: 20px 40px 20px 40px;
}

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

.blue-box {
  background-color: blue;
  color: #fff;
  padding: 40px 20px 20px 40px;
}

.box > div {
  background-color: #888;
}
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box"><div>padding: 20px 40px 20px 40px</div></h5>
  <h5 class="box blue-box"><div>padding: 40px 20px 20px 40px</div></h5>
</div>

I think it will clarify what's going on without saying.

The main reason is because you have text-align: center with a short text which makes the display seems uneven but it is actually even. If you have a full-width text, the "even-ness" will seem obvious.

Upvotes: 0

Related Questions