CSS vertical alignment Issue

Question

I am trying to get my <div> and my <button> to occupy the same space vertically. They each have a height:20px style but as you can see there is space below my <div> tag and space above my <button> tag. What should I do so that both my <div> and <button> tag take up the SAME 20px?

body, h1, h2, h3, h4, h5, h6, div, p, button { padding: 0px; margin: 0px; border: 0px; } .box { border: 1px solid red; } .boxes { display: inline-block; border: 1px solid black; height: 20px; width: 20px; } #next { display: inline-block; margin-top: auto; margin-bottom: auto; height: 20px; }

<div class="box" id="box0"> <p class="boxes" id="boxes0"> </p> <button id="next" onclick="switcher()">Guess</button> </div>

My jsfiddle is https://jsfiddle.net/pb4759jh68/37bfhxdr/4/

vertical-align is your friend with inline-block elements... (also, 0px is redundant - 0 is unitless, so just write padding: 0;) — random_user_name
– random_user_name, Commented Apr 18, 2018 at 15:04

Danny · Accepted Answer · 2018-04-18 15:10:57Z

Since you're working with inline-block elements you set the vertical-align property to middle on both of your .boxes and .next classes

body, h1, h2, h3, h4, h5, h6, div, p, button { padding: 0px; margin: 0px; border: 0px; } .box { border: 1px solid red; } .boxes { display: inline-block; border: 1px solid black; height: 20px; width: 20px; vertical-align: middle; } #next { display: inline-block; margin-top: auto; margin-bottom: auto; height: 20px; vertical-align: middle; }

<div class="box" id="box0"> <p class="boxes" id="boxes0"> </p> <button id="next" onclick="switcher()">Guess</button> </div>

Deleting my answer, this one has an explanation. Though not that you can also vertically align to the bottom and this will still work.

Collectives™ on Stack Overflow

CSS vertical alignment Issue

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related