Button and div with same settings behave differently

This is what I’m doing

create container div 96x30px, block, 0 margin, 0 padding, position auto
create button inside container div 20x30px, inline block, 0 margin, 0 padding, position auto
create div2 inside container div 50x30px, inline block, 0 margin, 0 padding, position auto

button and div 2 are not aligned at the top. If I do the same but replace the button with a div with the same settings as the button they do align at the top.

can someone please explain what I’m doing wrong?

Hi @Mowgli

Can you please update your post with some more information so we can help you faster? Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :smile:

First is the version where the 2 buttons have been replaced by divs with the same settings, in this case they align at the top with the white div in the version with the buttons, they are sitting about 4 pixels below the top of the white field.

I found out that if I increase the size of the minus sign on the button, the whole button slowly shifts up, If I add a text block inside the div version the whole thing has the same problem as the button…I really don’t know what to make of it

I resolved it by using clear left and clear right on the respective buttons yet I don’t understand why this worked or why it was necessary while it wasn’t if there was no text inside the buttons. Any info appreciated.

Hi @Mowgli, do you still have this case with the problem situation as described? If so, can you do as @Deni_1990 and share your read-only link? We can take a look to see what the issue is. Without the read-only link, it is difficult to provide a solution/answer for this :wink: If this is no issue anymore, then that is fine too :slight_smile:

thanks, I already fixed it somehow

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.