html - How can I put a (working) bottom margin on a hovered ? -

html - How can I put a (working) bottom margin on a hovered <a>? -

i wondering - when making website - how can set bottom margin lifts a-tag up.

css:

.navbar { background-color: #494949; border: 1px solid #ffffff; font-family: sans-serif; font-weight: bold; padding: 5px 10px; text-decoration: none; } .navbar a:hover { text-decoration: none; font-family: sans-serif; font-weight: bold; color: #494949; padding: 10px 10px; border: 1px #494949 solid; background-color: #67e727; }

and here's html:

<div class="navbar"> <a href="#">home</a> <a href="#">info</a> <a href="#">doneren</a> <a href="#">gallerij</a> <a href="#">contact</a> </div>

i hope can help me out :)

greetings form netherlands!

you not have repeat properties in hover state, want change. a tag inline element, see how box model works. force top on hover can't utilize margin, can utilize this:

.navbar a:hover { position: relative; top: -10px; }

html css margin