Percentage values of margin, padding and positioning values

Today, I touched the Responsive Web Design part and the first thing I had to learn was to use relative values for most of the things.

That took me to “How relative values of margin, padding and positioning values are calculated?”.

Consider the images below.

Parent with size (400x300)
Child with size (100x100) and margin: 20%; padding: 10%;
Child with sixe(100x100) and top: 10%; left: 10%; bottom: 20%; right: 20%;

What I learned from my findings is that:

  1. Percentage value of margins are calculated using width of containing box or parent.
  2. Percentage value of paddings are calculated using width of containing box or parents.
  3. Percentage value of top and bottom are calculated using height of containing box or parents.
  4. Percentage value of left and right are calculated using width of containing box or parents.

For more details check out this pen http://codepen.io/vs1682/pen/jyRYqO

Thank You.