Padding problem arises when you wrap an image with an anchor tag

I'm having an issue with a div containing an anchor-wrapped image, as there seems to be extra padding at the bottom of the div. How can I remove this?

HTML:

           <div id="lineup">
                <div class="line-up-click">
                    <p>CLICK TO VIEW THE 2014 OFFICIAL VELD LINEUP</p>
                </div>
                <div class="line-up-overview">
                    <a class="fancybox" href="images/lineup_coming.jpg"><img width="100%" src="http://productnightclub.com/velddev/wp-content/themes/veld-music/images/lineup.png" class="lazyload"></a>
                </div>
            </div>

CSS:

#lineup {width:370px; float:left; background-color:#000; padding:5px; text-align:center; margin-right:10px;}
.line-up-click p {color:#f5d41f; font-size:25px; line-height:58px; text-decoration:none; -webkit-font-smoothing: antialiased; font-weight:normal;}
.line-up-overview img {padding:0; margin:0;}

ISSUE:

There appears to be excess padding at the bottom of the div, possibly caused by the anchor tag. Any suggestions on resolving this?

htmlcss

Answer №1

By adding the property display: block; to the image, I was able to eliminate the extra padding issue. It is important to note that there is also a 5px padding on the div with ID #lineup.

.line-up-overview img { padding:0; margin:0; display:block; }

For a visual example, check out this link: http://jsfiddle.net/H585g/1/

Answer №2

When the image is styled with display: inline, it behaves like a character and aligns with the baseline, creating a gap for descenders found in letters such as j, g, y, and p.

To fix this issue, you can adjust the vertical alignment using CSS: img{vertical-align: bottom}

(courtesy of @Quentin)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking to develop a straightforward panorama application for Windows Phone 7 utilizing PhoneGap/Cordova – any tips on where to start

After searching extensively, I couldn't find any examples of PhoneGap/Cordova-based HTML5 apps for Windows Phone 7 that demonstrate how to create a panorama or pivot style app. These are key features of the OS UI that I want to incorporate into my app ...

jqueryhtmlwindows-phone-7cordova

Insert a new row into the table with a value that is taken from the input fields on the form

view image details I am working on a form that consists of 4 fields: Name, Last name, email, and role. There is also a button. When the button is clicked, the input from the above form should be added as a new row in a table below. ...

htmlangularforms

Width and left values don't play well with absolute positioning

I am encountering an issue where a div with absolute positioning, which is a child of another absolute positioned element, is not behaving as expected. Despite setting width:100%; left:1px; right:1px on the child element, it extends beyond its parent. < ...

htmlcss

Guide on displaying the name attribute of a button along with its price in a separate div when clicked

Upon clicking the Koala button, I want to display a message showing the id name of the button and the corresponding price for Koalas. Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link h ...

javascripthtmloop

Tips for extracting particular information from a website and displaying it within my application

While I have searched for a solution to my problem, I couldn't find an answer that fits my specific needs. I am attempting to extract specific information (highlighted in red) from this website: . I understand that JSON parsing can retrieve this data, ...

androidhtmljsonparsingweb-scraping

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I ...

javascriptjqueryhtmlcss

What could be causing the unpredictable behavior of my Material UI Tabs component, where it seems to be overriding other

I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...

cssmaterial-uitabsmodal-dialog

Utilizing Python's urllib and urllib2 to automatically populate web forms

My goal is to automatically submit an HTML form using both urllib2 and urllib. import urllib import urllib2 url = 'site.com/registration.php' values = {'password' : 'password', 'username': 'username& ...

pythonhtmlurllib

Sorting of tables does not function properly following an ajax request

I built a table that utilizes an AJAX response triggered by selecting a date from a drop-down menu. <!--datepicker--> <div class="col-md-4"> <input type="text" name="date_po_month_picker" id="date_po_month_picker" class ...

jqueryajaxhtml

Extra space at the beginning and inside the body div containers

Could someone please enlighten me on what my poor, foolish eyes are failing to see? I am experiencing whitespace at the top of my browser window and between two div tag containers in all browsers. I have tried setting margin: 0px; for p, body, html, ever ...

htmlcsswhitespace

What is causing Firefox to display an additional line in this section?

After much effort, I've been attempting to eliminate the extra spacing on this page in Firefox: Do you see the menu? If you compare it to Chrome, you'll notice that the menu is positioned too low beneath the background, giving the layout a broke ...

htmlcsshtml-lists

Can a hyperlink open multiple links at the same time when hovered over?

Can two links be opened in the same hyperlink when hovered over? ...

jqueryhtmlcsswordpress

Utilizing the DirectusImage tag for a stylish background effect

I'm new to Directus and I need help styling a card with a background image from a Directus Image. Can anyone guide me on how to achieve this? Here's what I have tried: <Card style={{backgroundImage:"url({someColletion.image.id})" &g ...

cssreactjsjsxdirectus

What is the procedure to modify a CSS class from the code-behind file?

So I have a CSS style in my .css class where the color is set to blue for hundreds of buttons. But now, my customer wants an option for green buttons which will be saved by a database field. So I check the field like this: if (!String.Is ...

asp.netcss

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Utilizing the angular2-tree-component, my goal is to display an already expanded tree. According to Angular docs, the initialized event should be used for expanding the tree after the data has been received: This event triggers after the tree model has ...

javascripthtmlangulartreeview

The submit button fails to produce any result

I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...

phpjavascripthtml

Having trouble with the CSS :hover tag? Try changing the display property from none to inline-block

I'm currently working on a website navigation menu... I've decided to utilize the :hover feature in CSS to switch the display property from none to inline-block. In the past, I have implemented this with no issues whatsoever. However, I am now e ...

htmlcss

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

javascriptjqueryhtmlcssnode.js

The submit button click does not trigger the execution of ajax code

I'm faced with a challenge when trying to implement an ajax call in my form. My goal is to display a spinner on the screen to indicate that the form is processing and submitting information. However, it seems that the ajax call is not being triggered ...

jqueryhtmlajaxforms