Padding issue observed at the lower part of the table cell in white color

Take a look at this JSFiddle: http://jsfiddle.net/nMbb4/1/

Here is the HTML code:

<table>
    <tr>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

This is the CSS code:

table, tr, td
{
    padding:0px;
    margin:0px;
    border:solid 1px black;
    font-size:10px;
}
table
{
    border-collapse:collapse;
}

td
{
    width:15px;
}

div
{
    width:15px;
    height:15px;
    display:inline-block;
    background-color:orange;
}

The issue is the white margin/padding at the bottom of the table cell. How can this be removed so that the orange background color fills the whole table cell?

Answer №1

If you want to move that element, you can adjust the vertical-align property of your <div>, which is set to baseline by default.

div {
 display:inline-block;
 vertical-align:top; /*or middle or bottom*/
}

Check out the example here: http://jsfiddle.net/nMbb4/6/

Answer №2

One reason for this issue is that display:inline-block adds white-space around the divs, so removing this property from the div will give you the desired output.

Check out the Fiddle Demo

While inline-block is still very useful, it's important for developers to know how to handle the spacing that comes along with it.

Additional Note: When using inline-block, any extra spaces or tabs in the code will be interpreted as white-space. To fix this issue, make sure there are no spaces between the items in your markup.

Answer №3

eliminate the display-inline styling from the division

view fiddle

Answer №4

Even if you're not currently facing this issue, here's a helpful solution for a related problem:

If you're experiencing white gaps at the bottom of table cells in IE11 when using the CSS rule

td > div {height: 100%; min-height: 240px}
, try changing it to td > div {height: 240px}.

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

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

Facebook pages that exceed 700px in length without the need for scrollbars

Is there a way to extend the length of a Facebook page without scrollbars when using an iframe, so that it doesn't crop at 700px? ...

Tips for effectively displaying HTML data from a database on a web browser

Storing html data in a database is a common practice for many web developers. The html data generated by a wysiwyg editor is typically simple and straightforward. Prior to storing the html data in the database, it is essential to run it through HTMLPurif ...

Saving HTML form data to a text file

I have a form on my website's index.html that looks like this: <form id="demo" action='submit.php' method='post' enctype='text/plain'> link: <input type='text' name='web'></br> <i ...

Converting Flex Text into HTML format for seamless integration

In my application, I have the capability to configure certain pages using the RichTextEditor and then save the resulting HTML Text Flow to a database for future use... When I import the saved data into Flex using a RichEditableText, everything appears as ...

What is the significance of the .jpg?t= in the URL?

This webcam image displays the code ?t=1512496926. What exactly does this code signify? Could it be related to time? Is it just a random string of characters? https://i.stack.imgur.com/ZAZMy.jpg ...

Result of utilizing Bootstrap Radio buttons

Looking at the HTML snippet below, I am trying to display two lines of radio buttons. However, when I click on a radio button in the first line and then proceed to click any radio button in the second line, the result of the radio button in the first line ...

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

A hyperlink unveils a visual and conceals its own presence

I'm a beginner in the world of coding and I have a question about creating a link that reveals a hidden image while hiding itself using HTML. After some research, this is what I've come up with: <a href="javascript: ...

Using Selenium Web Driver to extract information from Google's knowledge graph

Currently utilizing the Ruby Selenium web driver, my goal is to extract content from the Google Knowledge Graph located on the top right-hand side of the search results page. This element is within the <div class="xpdopen"> section. @driver = Seleni ...

What is the best way to incorporate navigation options alongside a centered logo?

Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...

In Firefox, the Ajax Call is failing to initiate a response automatically

I am currently working on developing a dynamically generated accordion with nested subaccordions. A filter function has been successfully implemented to manipulate the content on the page using Ajax. In order to achieve this, the following function has bee ...

Is it possible to detach keyboard events from mat-chip components?

Is there a way to allow editing of content within a mat-chip component? The process seems simple in HTML: <mat-chip contenteditable="true">Editable content</mat-chip> Check out the StackBlitz demo here While you can edit the content within ...

What is the reason why boolean attributes dont actually have a boolean value in HTML?

It's interesting that certain elements have boolean attributes. I find it curious why the values are not true/false or 1/0. Is there a specific reason for this design choice? <option selected="selected">Ham Burger</option> or <input ...

Revamp the Side Navigation Feature to Identify the Currently Viewed Section of the Page

My website currently features a side navigation bar that dynamically updates based on the user's scroll position. When the user reaches a specific height, a class is added to a div in the sidebar, turning it orange and indicating which part of the pag ...

My Ajax request is hitting a snag - the success function isn't functioning as expected

Having an issue with the success function in my ajax call. It doesn't seem to be working as expected. Check out the code snippet below: var data1 = { "name": namedata[0], "email": namedata[1], "mobile": namedata[2], "company": namedata[3], "message" ...

Utilizing external CSS to style an SVG file within an HTML document

Hello there, I have a collection of SVG files that I need to dynamically modify the fill color of, preferably using CSS. Here is the structure: <div> <svg width="100%" height="100%" viewbox="0 0 64 64" preserveAspectRatio="xMinYMin m ...

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

Using JavaScript to replace static placement

I'm looking to implement a floating navbar on my website, the kind that scrolls down with you and stays at the top of the window. However, I've run into an issue with certain Android versions (like 4.3) when using the fixed position. My navbar w ...