Assessment wanted for A cool-looking box, border question

MDN Learn
#1

Hello, I’ve completed the CSS assessment: A cool looking box except for this one caveat.
The rule :
border: 1px solid rgb(255,0,100);
causes 38.4px to be added to the height of the div. I tried stripping the whole assessment down to its most basic properties and i still can’t isolate what’s causing this height addition. Take the border away and the content reverts back to 200x200px. I’ve checked all the rules that are automatically implied by a “border” property such as border-image* and still no solution. Why does this border rule add height automatically to my div. Thank you.

Link to code: JSBin

Link to assessment: A cool looking box

#2

Hi @WantToHelp

In line 11 of your CSS, you comment that the calculation would result in a font-size of 18px. This, however, is not the case and will result instead to 19.2px

16px * 1.2 = 19.2

This has unintended consequences with the relationship between your line-height (set on the div) and the border (in question) added.

You can read the following regarding line-height and why it is better to set number values instead of lenght values.

I hope this helps somehow.

#3

vusithedev:
Thank you for your response.
I tried using 1.5 as my line height instead of 200px but I still get the extra height space when adding a border to my box. The only reason I used 200px for my line-height was due to this line in the assessment:

*** A reasonable height for a large box, centering the text vertically in the process.**

Anyway, i’ll keep trying to make sense of it. Thanks.

#4

Regarding the changing height with/without border:
The reason for this seemingly strange behavior is caused by “margin collapsing”. Under certain circumstances the margins of parent and child elements are collapsed and the bigger one of them is used outside the parent element. But there are situations where this will not happen for example when the parent has a border or text before the child. In this case the margin will be inside the parent.

Since <p> has a default margin-top and margin-bottom of 1em, you see a height difference of 2 * 16px * 1.2 = 38.4px.

Have a nice week to both of you,
Michael

1 Like
Border behaviour div
#5

mikoMK:
Thank you for your response. That was the problem. I need to read up on this topic to really understand what happened but when I set the margin on the child p element to 0 or initial or inherit etc., the problem is resolved and no marginal height is added. Thank you.

1 Like
#6

You’re welcome!
Alternatively, you could also just remove the <p> element and have the text directly in <div>.