Why is it doing this?

Question

I have a question about this code: https://code.sololearn.com/Wq7n7DNMB5nA/#css If I enable the /*border: 1px solid black;*/ line, the grey cube jumps down. But i don't know why?

In Hungarian: Van egy kérdésem a kóddal kapcsolatban. Ha engedélyezem a /*border:1px solid black;/* sort, akkor a szürke kocka lejjebb ugrik. De miért?

Answer 1

if i am not mistaken, the answer lies with this line inside #orange{...}:
margin-top: 40px;

my assumption is that without border the margin is calculated from the top of the screen.

but once the border is in place, that is new relative point from which the calculation start.

can someone confirm that for me?

Answer 2

same thing happens when you add display inline-block to grey div. bottom line make the div float let and clear the content after it

Answer 3

grey is parent of orange which has margin top 40px. so because grey is not floating, when you add a border to it, it starts floating on the left of the document. you can hack this by simply adding float left to the grey div

Answer 4

And what if you write something after <div id="grey">? It is jump up.
What is the relation between #orange's margin-top value and the #grey's margin?