Responsive Design

For example, when a property like margin-left is set using a percentage (say 50%), the element will be moved halfway to the right in the parent container (as opposed to the child element receiving a margin half of its parent’s margin).

Exercise:
https://www.codecademy.com/courses/learn-responsive-design/lessons/sizing-elements/exercises/percentages-padding-margin?action=lesson_resume

I do not understand this paragraph. Kindly explain.

Let’s say you have **<h1>**in a <div> element,

<div>

<h1>Test</h1>

</div>

if you set the margin-left property of that h1 element to 50% it will move the h1 element 100pixels to the right inside the parent container which is the <div>

<div>
<!-- margin-left set to 50% -->
                                 <h1>Test</h1>

</div>
1 Like

thanks @bandit. So this means 50% of the box length of div?

In theory yes, yes that’s what it means. :slight_smile: