Get Rid of Unwanted Space
Below <img>
Unwanted space below <img>
Image above shows the correct styling (Left Side) and unwanted space below <img> (RightSide).
HTML Code
<a class="link" href="#">
<img src="your image path" alt="Image" />
</a>
Style
.link {
border:1px solid red
}
Why Does It Happen?
Well, for my case, "line-height" property is the culprit. I often assign "line-height:normal;" to <body> so, I'll never miss any line-height. However, it will also cause the unwanted empty space below <img>
How to fix it?
Change "line-height" value to 0 for <a> tag.
.link {
border:1px solid red;
line-height:0
}
Syazwan Hakim is the Android Purist of Stampede Design.
An Android purist, Syazwan can be seen at his regular hangout place chanting and shrieking over Manchester United matches. At work, he matches design artwork into a fully functional website with pixel perfection. Holler to Iwan over at Twitter.
Share This Post
TOPICS
- All
- A City of Our Own
- Books
- Code
- Creative Burst
- Design
- Events
- Gadgets
- Giving Back
- Inspiration
- Made Us Excited!
- Roundups
- Team
- Travel
- User Experience
- Weekly Bits
- Work
CURATED
Brothers Grimm Book Collection
graphic design, print design, Typography
STAMPEDE: CURATED
RECENT FINDS
- Designing Instagram’s Logo You may have noticed... blog.instagram.com
- A City of Our Own Part VI: London www.stampede-design.com
- Improving navigation on large accordion content panels www.stampede-design.com
- Usability checklist | Catch common usability problems before user testing. userium.com
- Wireframe Showcase - Home www.wireframeshowcase.com
- Syazwan Hakim's Photos Yay! Finally arrived! Thanks @[145552572207480:274:Stampede Design]!
- In the cloud www.stampede-design.com
- Creative Burst: Ebook Reader www.stampede-design.com
- Click-clack-ding! www.stampede-design.com
- What Sci-Fi Tells Interaction Designers about Gestural Interfaces uxdesign.smashingmagazine.com
Stampede Design
Be the first to comment
Leave Comment BelowMentions
There's no mention yet.