CSS Interview Questions and Answers
Question: How do I get rid of the gap under my image?Answer: Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centred. What many people don't realise is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :CSS img {display:block;} One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this : CSS ul, li { list-style-type:none; padding:0; margin:0 auto; } ul { width:150px; } li { float:left; } HTML <ul> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> <li><img src="wine.jpg" height="50" width="50" alt="wine" /></li> </ul> |
Is it helpful?
Yes
No
Most helpful rated by users:
- What is CSS?
- What are Cascading Style Sheets?
- As a reader, how can I make my browser recognize my own style sheet?
- How do I combine multiple sheets into one?
- What are Style Sheets?