Why padding-left and height are not working the same as padding-bottom and width?

Asked Mar 01 '18 at 15:43

Active Mar 01 '18 at 15:59

Viewed 72 times

I'm trying to understand what is happening behind the scene. Here is the thing. When I gave the first dive width and padding-bottom or top, it takes effect and box is showing up. So I'm assuming that I have chosen the width and then change the height by padding and it's working in this way. However, with this idea, I thought that by giving height and padding-left or right it should work the same but it doesn't. So I really appreciate if someone explains it to me.

first div:

second div:

.square{
  background-color: red;
  width: 30%;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
}
.square2{
  background-color: blue;
  height: 30%;
  padding-left: 30%;
  float: left;
  margin: 1.66%;
}

 <div id="container">
 <div class="square"></div>
 <div class="square2"></div>
</div>

edited Mar 01 '18 at 15:59

Paulie_D

107,962
13
142
161

asked Mar 01 '18 at 15:43

Mo Hemati

1

Because padding in % is always related to `width`? – Paulie_D Mar 01 '18 at 15:44
is that a question or an answer? :-) – Mo Hemati Mar 01 '18 at 15:49
I suspect this is a duplicate question but I'm pressed for time in trying to find the dupe target. – Paulie_D Mar 01 '18 at 15:50
Aha....found it. – Paulie_D Mar 01 '18 at 15:51

Why padding-left and height are not working the same as padding-bottom and width?

0 Answers0