Question

How can I make the link to stay inside the div element, and not extend above and below it? Looks like it has something to do with padding which is not accounted for and the div thinks the link is just as tall as the text is.

Is there a way around it?

Fiddle

Code:

div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue;    
}
a:link {
    color: white;   
}

<div><a href="#">Link button</a></div>

Answer 1

div {
    background-color: yellow;   
    margin-top: 20px;
}
a {
    padding: 10px;
    border: 1px solid black;
    background-color: blue; 
    display:inline-block    
}
a:link {
    color: white;   
}