odd behavior in css!!

Question

when i leave a button in my code empty it forces others buttons to next line(to bottom).
why this happens?

https://code.sololearn.com/WPjiKRTvREnO/?ref=app

please if you don't know answer just upvote and leave my question unanswered.

Answer 1

Mehran yea you're right!
Your question has already answered here:

https://stackoverflow.com/questions/53068621/why-do-empty-html-elements-behave-differently-than-ones-with-content

"Because by default button elements are vertically aligned at their baseline , which is either the last line of text or (if there is no content) the lower border, like in your image.

You can avoid that by adding vertical-align: top; or any other vertical-align setting."

Good luck 👍

Answer 2

All your other buttons have a text (letter). So that button somehow has a different inner height...
You could try adding a non-breaking space character to your empty button like this:
<button id="shift">&nbsp;</button>

It seems to solve the issue for me.

Answer 3

Amin Rostami great 👌
css is odd usually.
for example i see in SoloLearn a question which has issues about width of canvas with width attribute and when we apply to canvas position relative or absolute its width in console becomes 2x.😮with no change in reality.
and this issue was solved by adding left:0; 😮
no css man could not understand that behavior.
and i noticed another undocumented behavior at last night:
it isn't odd but it is undocumented.
https://code.sololearn.com/WYD15pDCcU20/?ref=app

Answer 4

Tibor Santa thanks
but shift button has a long height. i can't agree.
yeah. nbsp solves the problem. but i want to understand the main reason for the problem

Answer 5

Percentage "%" in CSS is very tricky!
It should specify in every element and its nested children to work as expected.
"Rem", "em", "vw" & "vh" have better behavior on implantation.
Btw
.row {
display: flex;
}
Will show it as expected.
Use "margin" on third row to indent it.

Answer 6

Amin Rostami thanks very much.
there are several ways to solve the problem.(such as flex layout and adding content and absolute positioning) but i want to understand the main reason.
i don't think percentages makes this problem.

Answer 7

Mehran yeah.
because i believe absolute position takes in account of available width of parent ...
where padding doesn't count while border does ....

so having width:100% will take width+padding but not border

So its well defined ?
Or lets dig into chromium src code again xD

Answer 8

Prashanth Kumar Yeah. I changed the code. it takes padding-box of its parent.

Answer 9

Prashanth Kumar but i didn't see this point in any reference.

Answer 10

so yes. we should dig chromium src😄😅