What causes a div with display: table-cell to have excessive padding when an image is added to it?

Is there a way to remove the padding completely?

Take a look at the jsfiddle version:

CSS:

.table
{
    display: table;
    height: 250px;
    border-color: black;
    width: 500px;
    padding: 0px;
}

.cell
{
    display: table-cell;
    height: 250px;
    width: 50%;
    padding 0px;
    border-color: blue;
    border-style: solid;
}

.cell img
{
    width: 250px;
    height: 250px;
    border-color: red;
    border-style: solid;
}

HTML:

<div class="table">
<div class="cell">
    <img src="">
</div>
<div class="cell">
    Caption
</div>
</div>

Even though I have specified padding: 0 for all elements, the left cell still has padding if the img element is present. How can I resolve this issue?

Answer №1

That's not how it works. The current display is due to the default vertical-align property, which is set to baseline.

To achieve the desired layout, adjust the vertical alignment of the cell to top (or middle or bottom based on your preference).

Here's a jsFiddle example

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

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

Is there a difference in the functionality of CSS :invalid between Chrome and Firefox?

I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox: <html& ...

What is the best way to position a div below a sticky navbar?

I have implemented a sticky navbar on my index page along with JavaScript code that adjusts the navbar position based on screen height. When scrolling, the navbar sticks to the top of the page, but the flipping cube overlaps with the sticky navbar. How can ...

The default setting for the calendar picker indicator should be enabled

Whenever I hover my mouse over it, an indicator pops up, but I want to make it the default <input type="date" class="form-control" name="Date" [(ngModel)]="opening_date" (ngModelChange)="Operating()" style="width:550px" required> inp ...

The session name has not been properly defined

Sorry for any errors in translation. I'm facing an issue where the session name I insert is coming up as undefined. However, when I manually enter the username, everything works fine. View Image <? php session_start (); echo var_dump ($ _SESSION ...

The request for data:image/png;base64,{{image}} could not be processed due to an invalid URL

I am facing an issue with converting image data that I receive from the server using Angular.js for use in ionic-framework. Here is the code snippet I have been working with: $http.post(link, { token: token, reservationCode: reservatio ...

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

I am working with this ASPX code: <div id="IsAccountingOk" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br /> <asp:Label ID="lblIsAccountingOkHeader" runat="server" Text ...

Steps to halt webkit animation within a div located inside a circle:

I have a series of nested circle divs, and I want to give them a pulse animation. The issue is that the text container is within one of these circles, causing the animation to apply to the text as well. I am unable to move the text container due to potenti ...

Layering one canvas on top of another

Here is the code I am working with. With a JavaScript library, I can draw on the first canvas and then merge it onto the second canvas. My question is, how can I make the first canvas stay in place or float, regardless of where I scroll on the second canv ...

Can a fixed div be made to adapt to different screen sizes?

Struggling to make SVG data charts responsive due to the 'position:fixed' CSS attribute applied, I'm exploring alternative solutions that don't involve media queries. Ideally, I want the SVG to scale up and down while remaining centered ...

The backdrop takes precedence over all other elements

The issue I'm facing is that the other Div is not appearing above the background. My goal is to have the background fill the entire screen. <title>The Ultimate Cube World Resource!</title> <link href="style.css" rel="stylesheet" type=" ...

The email verification process is experiencing technical difficulties

Having trouble displaying error message when emails do not match I am relatively new to PHP and could use some assistance. The $email variable captures the user's email input, while the $VerifyEmail variable does the same for email verification purp ...

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

Setting up web SMS configuration for email integration

I have a code for sending web mails and SMS notifications that is functioning correctly. However, I want to receive SMS notifications only when users select the “A” value from the servicerequired drop-down menu and do not wish to receive SMS between 8 ...

Exploring the Link Between jQuery and HTML

Is it possible to connect between an HTML file and a jQuery file? Here is an example scenario: jquery-test.js: $(document).ready(function(){ $('#inputForm').submit(function(){ $('#inputForm :text:not("#submit")').each(func ...

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

What is the best way to create a website cover image with a set height and a width that expands?

Is there a way to have a cover image on a web page that expands in width as the screen size increases, but maintains a fixed height? I found a page with the desired effect that I want to replicate: Below is the link to my page where I want to implement t ...