Learn html forms by building a registration form step-17

label {
display: block;
margin: 0.5rem 0;
}

Question: Typically, the CSS margin property distributes the first value to the top and bottom margins and the second value to the left and right margins. In the example margin: 0.5rem 0;, why is the value 0.5rem distributed only to the top margins and not to the bottom margins? Is this a standard convention or is there another reason for this specific distribution in CSS?

I noticed that normally this convention is used, but in this case, I was surprised to see that the 0.5rem value is only applied to the top margin. I would like to better understand the logic behind this distribution. Thanks!

It definetely applies it to the bottom aswell, keepin gin mind what we learnt about margin following the top, right, bottom, left clockwise direction you can add and remove margin to see if it was applied or not and when you set the bottom margin to 0 it moves compared to when 0.5rem is set for bottum and top so it definetely does add to it try it out!

label {
  display: block;
  margin: 0.5rem 0 0 0;
}
1 Like

another thing i use is the dev commands in mozilla firefox as unlike chrome it allows you to change the margin, border and padding to help you apply these values easier and has helped me grasp the consept of them much more here is a screen shot: