CSS CSS Basics The Box Model Margins

Ivana Lescesen
Ivana Lescesen
19,442 Points

Why is the margin for wildlife set in px and the pading for wildlife in %

In this video

https://teamtreehouse.com/library/css-basics/the-box-model/margins

Why is the margin for wildlife set in px and the pading for wildlife in %. Also why is the padding in h3 in ems. I do not understand. Please help.

Thank you so much :)

2 Answers

Steven Parker
Steven Parker
200,784 Points

In the case of the margins, the values given are for top and bottom. Percentage values are based on the container width, so they are not as useful for vertical values. But it could also be a case where specific amount of space is desired, independent of the window size.

The advantage of setting a value in ems is that it becomes relative to the font size. If the font size is changed at a later time, the spacing will adjust accordingly. For any given font size, the ems unit can be translated to pixels as discussed in the video.

Ivana Lescesen
Ivana Lescesen
19,442 Points

Hello Steven, thank you so much for your reply, i have just one more question. Isn't it bad practice to use so many different values px % and em. is it really necessary to use so many values. Would it be possible to use em for text and px for margin. What kind of measurements do you use?

Looking forward to your answer :)

Taylor Espejo
Taylor Espejo
3,939 Points

Hi Ivana, A little late to the party however I do believe I could provide a good opinion on this ! No, I wouldn't say it's necessary to use all the values you have mentioned - its honestly quite subjective at times; and more often than not, based on the task requirements. ( be it essential to have high accessibility, a ebook, perhaps just a image heavy webpage). Not too many examples spring to mind so forgive me ! https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

I don't agree with everything in the article above however I think it definitely will interest you, give it a read and let me know where you think you stand ? :)

Taylor