.link:hover { width: auto; height: 18px; background: black; border: 1px solid red; }

With hover, the content part (the one that stands out in black) does not fit the size of the button itself. How to fix the situation?

  • Maybe: box-sizing: border-box But better, attach a link to the example - blatube.com
  • box-sizing: border-box is set for the .link class itself. - Gerda
  • maybe something is stopping there - darkwoolf
  • Let's give an example already - blatube.com
  • tell me how to insert a screenshot here? sorry, but not vkurse (I just want to visually show how everything looks - Gerda

2 answers 2

Probably, you can fix the property box-sizing:border-box .

  • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦
  • This is not true. jsfiddle.net/cu9oevx7 - Vadim Ovchinnikov

The problem will be resolved through the general style for the hover button and button:

.link, .link:hover { height: 18px; }

When this is used, the box-sizing property is optional, but this can be added to the same selector.