takeradi takeradi - 4 months ago 9
HTML Question

On line-height change, adjacent buttons and text below buttons move down when one button is clicked

I have a

.button
class which on the active state adds an
inset box shadow
and increases the
line-height
by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?

Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the
line-height
.



.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}

.button:active, .button:focus{
outline: none;
}

.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}

<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>




Answer

Just add vertical-align: top; to your .button styles.

Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.

.button{
  display: inline-block;
  vertical-align: top;
  height: 36px;
  padding: 0 18px;
  background: cyan;
  color: black;
  border: none;
  line-height: 36px;
  margin: 6px;
}

.button:active, .button:focus{
  outline: none;
}

.button:active{
  box-shadow: 0 2px 0 0 blue inset; 
  line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Comments