Is there additional cushioning beneath an image within a div element?

It appears that my div containing an image has extra padding at the bottom for some unknown reason.

You can view the JSFiddle here: http://jsfiddle.net/KSs7V/

Any suggestions on how this padding might have been added and how to correct it?

CSS:

.artist-box {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}

.artist-pic {
    height: 245px;
    margin: 0;
    /*box-shadow: 0 0 10px black;*/
}
#artist-wrap {
    max-width: 1800px;
    margin-top: 5px;
}

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
}

Answer №1

To ensure proper alignment of your image, consider adding either vertical-align:top or display:block to your image CSS rules:

.artist-pic {
    height: 245px;
    margin: 0;
    vertical-align:top;
    /*box-shadow: 0 0 10px black;*/
}

Check out this example on jsFiddle.

Another approach is to include font-size:0 in the image container div's styles:

.indArtistBox {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    border: 1px solid #000;
    font-size:0;
}

View an illustration of this on jsFiddle.

The spacing issue arises from the presence of space reserved for descender elements (such as 'j', 'g', 'y') since images are treated as inline elements.

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

CSS Horizontal Menu positioned left losing its background color due to float property

Can you explain why the background color of the ul element disappears when its child elements are floated? I have a vague memory of reading something about floats causing this issue, but I can't recall the details. (JSFiddle) ul { padding-left: ...

The Gulp task is not being recognized when I open the project in Visual Studio Code

Whenever I open gulp, I encounter an error related to minifying css and js files using gulp tasks. Despite my efforts to find a solution, the problem remains unresolved. Error Message: assert.js:374 throw err; ^ AssertionError [ERR_ASSERTION]: Task fu ...

Navigating within Vue.js: Utilizing vue-router for seamlessly redirecting to targeted sections within a view identified by an ID

I am in the process of using a Home view and a Blog view. My goal is to utilize a <router-link> to transition from the Home view to a particular section within the Blog view. The specific section I am referencing appears as follows: <section id=&q ...

Using nodeJS to showcase content on a web page

I'm relatively new to NodeJS, and I am trying to figure out if there is a way to utilize NodeJS similar to JavaScript. My goal is to retrieve data from a database and display it within a div on my index.html page. When attempting to use querySelector, ...

ASP.NET Core 3.1 dynamic image resizing

<div class="col-md-6"> <div class="border"> <img height="300" width="400" src="~/Images/vg.png" class="rounded"/> <p>This is a sample paragraph.</p&g ...

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

Incorporating HTML with ng-binds through transclusion

I have been developing an angular directive to enhance the functionality of ng-table by adding filtering and exporting features. The main goal is to make this directive reusable for multiple tables, which requires the <td> elements to be dynamic. To ...

Instructions for creating a table in this specific format

I have some data stored in MySQL and I am looking to display it in a specific format: Data: Name, Image URL, Link I would like to dynamically print it like this: Even though I don't know the user's screen width, I want it to be displayed as w ...

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

Navigate to the following div, navigate back to the previous div

I am attempting to implement a div navigation system with next/previous buttons. Despite searching extensively on Google, I have not found the exact solution I am looking for. First and foremost, I want to maintain the integrity of my html structure. < ...

Can CSS achieve Turing completeness?

As far as my understanding goes, CSS is not considered Turing complete. However, I admit that my knowledge of CSS is quite limited. Can CSS be classified as Turing complete? ...

What is the process for creating a hover effect on a button that is triggered when a user hovers over the button's parent container?

Visit this link to view the code My Goal: I want the hover effect that normally applies to buttons when hovered over, to instead be applied when a user hovers over the parent div containing those buttons. The parent divs in question have a class of "ser ...

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

What is the best way to adjust the width of these elements for a perfect fit?

I'm currently working on a website where I have arranged squares in a grid layout. My goal is to make these squares perfect, with equal width and height. The only issue I'm encountering is that they tend to change between fitting two and three sq ...

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

Ways to conceal an HTML checkbox while displaying its accompanying label

Recently delving into jQuery, I have been exploring how to utilize the jQuery-ui Selectable component as a substitute for checkboxes. http://jqueryui.com/demos/selectable/ I believe I may be able to achieve this if I can discover a method to conceal the ...

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...