CODEWITHSUNDEEP
htmlcss
Eleeist
Eleeist

Reputation: 7041

Div not wrapping link correctly

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>

Upvotes: 0

Views: 460

Answers (3)

yckart
yckart

Reputation: 33408

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

Upvotes: 3

Undefined
Undefined

Reputation: 11431

Because you are using padding on your anchor it needs to have display:block set.

Please see my jsfiddle here.

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

Upvotes: 0

HansElsen
HansElsen

Reputation: 1753

Add the padding to your div, not your link.

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

Upvotes: 0

Related Questions