Reputation: 531
How can I make img or element with image background same height, padding and margin as other links?
Here is my code
a {
display: inline-block;
padding: 1%;
border: 1px solid black;
color: black;
font-size: 15px;
}
a img {
height: 15px;
border: 1px solid red;
}
.backg {
display: inline-block;
padding: 1%;
border: 1px solid red;
color: black;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 100%;
}
here is codepen http://codepen.io/anon/pen/ZQRyOd?editors=1100
Upvotes: 1
Views: 41
Reputation: 376
I am not sure that I understood the question but you can add vertical-align: middle;
to .backg
and a img
Upvotes: 1
Reputation: 2352
In my opinion if you don't care about older browser you should use flexbox Here is a decent guide for doing so:
Upvotes: 0