Guide: Things to Know About CSS Percentage Margins Calculator
Most web designers think they know CSS pretty well. After all, there’s not much going on – a few selector types, a few dozen properties, and some cascading rules that you hardly need to remember, as they boil down to common sense. But when you get to the nitty-gritty level, there are plenty of obscure details that few designers really understand. When I looked at the results of a free CSS test I’ve been offering online for the past six months, I discovered a question that hardly anyone got rightOf the thousands of people who took the test, less than 14% was right The question boils down to this: How do you calculate percentage margins?
The question
Suppose your site has a container div and within it a content div: Now let’s give that content div a top margin: .content {margin-top: 10%;} Okay, so it’s 10% … but 10% of whatThat is the question only 13.8% of people can answer correctlyAnd beware: these people have access to Google! What I like about this question is that it seems the answer must be clearSo much so that I suspect most people are just making a guess (and a wrong guess). But it may not seem obvious to you. I mean if you’re really using your imagination there are many ways the browser could calculate such a margin. So what if I narrow it down for you since the question in the test is actually multiple choice questions. Here are your options:
10% of the height of the content div 10% of the height of the container div 10% of the width of the content div 10% of the width of the container div
Remember that only 13.8% of people can choose the correct answer from this list. That’s much worse than coincidence! Look carefully at the answers; you will see that there are really only two things you should know:
Container or content?
First, is the size of the margin based on the size of the content div itself, or on the size of the container div? This isn’t a gimme, but you can probably rely on your instincts. If I set a div to 50% of the width of the container, and I want the left and right margins to fill the rest of the space, I would of course set them to 25% each (so the percentages count up up to 100%). For that to work, percentage margins must be based on the dimensions of the container. Sure enough, two-thirds of the people taking the test get this part of the answer right.
Width or height?
Second, is the size of margin top based on the width or height of that element? If you’ve been paying close attention, you’re probably already on your guard. In order for so few people to choose the right answer, this has to be one trick question, right? And yet, I bet you can hardly believe that the answer is not length. Well it is not. Yes, we are talking about a top margin here. Yes, the size of that margin is a vertical measurement. Yes, if a block is 50% of the height of the container, and you have given it a top margin of 25%, you would expect that to be 25% of the height of the container. And you would be wrong. Don’t feel bad if you thought it had to be length. Almost 80% of the people who take the test agree with you:
It makes sense … No, really!
Still don’t believe it? Here’s a quote from the W3C CSS specification: The same goes for the top and bottom padding, in case you were wondering. As for the borders, it is illegal to specify their width as a percentage. So at this point you probably think that the creators of CSS are either crazy, or they just made a really stupid mistake. But I’m here to tell you that there are two good reasons for basing vertical margins on the width of the containing block:
Horizontal and vertical consistency
There is, of course, a shorthand property that allows you to specify the margin for all four sides of a block: margin: 10%; This extends to: margin-above: 10%; margin-right: 10%; margin-below: 10%; margin left: 10%; Now, if you’ve written any of the above, you’d probably expect the margins to be the same on all four sides of the block, wouldn’t you? But if margin-left and margin-right were based on the width of the container and margin-top and margin-bottom were based on height, they would usually be different!
Avoid circular dependence
CSS specifies content in blocks stacked vertically on the page, so the width of a block is usually determined entirely by the width of its parent. In others words, you can calculate the width of a block without worrying about what’s in that block The height of a block is another matter. Usually the height depends on the combined height of the contentChange the height of the content, and you change the height of the block. Do you see the problem? To get the height of the content, you need to know the top and bottom margins applied to it. And if those margins depend on the height of the parent block, you’re in trouble because you can’t calculate one without knowing the other! Basing vertical margins on the width of the container breaks that circular dependency and makes it possible to format the page.
Ace the class
So there you have it: the hardest question on the test, and now you can answer it. Do you want to know how you would do for the rest of the test? Try it for yourself. I promise, most questions are much easier than this one. In the meantime I am looking for a new hardest question! What detail of CSS do you think no one knows? Editor’s Note: This is written for Hongkiat.com by Kevin YankKevin has been writing around the web since 1999, with books on PHP, CSS and JavaScript to his name. He has also hosted podcasts, spoken at conferences and produced video training courses all over the web. He now heads the development team of Sit the Test, a web application for creating and administering online tests.
More about Hongkiat:
Web design: equal column height with CSS 6 CSS Tricks to vertically align content A look at CSS units: pixels, EM and percentage A look at: CSS3 Box sizing
Now Read: 10 Hidden CSS3 Properties You Should Know About
Things to Know About CSS Percentage Margins Calculator: benefits
Faq
Final note
I hope you like the guide Things to Know About CSS Percentage Margins Calculator. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Things to Know About CSS Percentage Margins Calculator, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Things to Know About CSS Percentage Margins Calculator”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Things to Know About CSS Percentage Margins Calculator, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
