Hi! I am facing trouble calculating the em values. Certain sections in my design are overflowing.
Here attached is a link to my code - https://codepen.io/juliescanvas/pen/oNQjdGj
The image is not visible, but I will attach a screenshot of the webpage for reference.
I have set the box-sizing to border-box for the header and footer. Is that the right approach?
P.S - Please bare with the absurd color choices in gradient ![render|478x345]
(upload://jYDYAWQavPQYw4NnkA6yypATPep.png)
Please help me understand the size calculations. I considered to be the parent tag and calculated the em values from it, but it does not work.
I’ve managed to solve it, but I don’t really like it
Let’s start with the biggest issue: the size of the em is dependent on the font size, you are using a different font size in the footer, which makes 5 em equal to 75px instead of 50px. So I changed 5 em to 3.333333em.
This does not solve it though, as there is still a discrepancy. We have three boxes, 50px, 12px and 50px (or 5em, 12em and 5em) respectively, it should add up to 220px, which is the size of the card. But for some reason there is still some extra space between the boxes. Putting display: grid; on .card solves it though.
I made a couple of other changes as well, just for completeness sake:
because of the em size change in the footer, the border-radius should also use 1em instead of one and a half
and the padding is too big for the text, so I used padding: 0 1em; instead.
But taking a step backwards, maybe this whole ordeal would’ve been easier if you used the flex system
Hello @shlokk
Now let us come to the issue you are having in your code.
It is overflowing because of the size calculations you predicted.
To explain: when you want to use em, what do you do:
You set the font size of the parent element to an absolute length like 15pt or 15px and others.
e.g font-size: 15px;
You implement it on the child element by using that length. e.g font-size: 2em;
This means the parent’s font-size is 15px and the child’s font-size is now 30px.
Now what happens if you nest another element(grand-child element) inside the child element and you set the font-size of the grand-child element to 2em?
What will happen is that it will be relative to the child element. The Child element is 30px, so when you set the font-size of the grand-child to 2em, it will be relative to the Child element. Now the Grand-child element will be 60px.
Now your code raises a potent question that will require an answer.
What if i want to control the text inside the child element and still calculate my height based on the parent element just like you did.
Your height here in this code is 5em which if relative to the parent element( html in this case since body does not have font-size set on it) is 50px. But this is not the case since it has font-size set on it, the height here will now be relative to itself. So the height here will be 15px(font-size) multiplied by 5 which will be 75px.
This tells us an important fact that if you set font-size of an element to a certain absolute value(px, pt e.t.c) and you then set the width of that same element using em- it will calculate based on its font-size. But if font-size is not provided on the element and you set its width (or any other property that takes length) using em, it will calculate from the parent’s font-size (or any other property that takes length)
Another reason why it will overflow is because h2 and p has default margins implemented by the browser. So you need to remove default margins by specifying
*{
margin: 0;
padding: 0;
}
So to tame CSS and control it according to your needs.
You either set the font-size on the p element which you actually want to control and remove font-size from the .card-footer
Here is a solution- Solving the em issue 1
OR
You change all the em units to rem units in the .card-footer
Here is the solution- Solving the em issue 2
So the Issue is solved.
Now you asked if your aproach for setting box-sizing was right-
My Opinion would be that you are right in this case because if you attempt to apply it for all elements using the
*{
/* Some CSS code goes here */
}
Your footer will still overflow because the .card element’s border is now included in the total height of 220px.
Total height = 220px;
Borders = 4px;
Available height = 220px - 4px which is equal to 216px;
Now the height needed by the child elements is 220px. So it will overflow by 4px.
P.S - Your question improved my understanding of CSS.
To read more about em and rem => read this page- rem-vs-em
I hope you will understand my answers. If not Please feel free to ask me any questions you have on it.
I am so thankful for this answer. Really appreciate you taking out the time and explaining it vividly. The example of parent, child, and grand-child really helped me grasp the concept. I fixed the code and feel so much more confident to keep learning. Thanks again
Yes, I was wasting time trying to do it traditionally but I realize it now. Learning grid and flex properties to make my job easier. I thank you for the changes made to the code, it improved my understanding of border-radius property and padding.
