Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css?

See this example: http://jsfiddle.net/dd7h7/3/.

HTML

<div class="widget">
  <div class="button">
    <div class="content">
      <div class="icon">A</div>
      <div class="label">ABC</div>            
    </div>
  </div>
  <div class="button">
    <div class="content">
      <div class="icon">B</div>
      <div class="label">ABCDEF</div>            
    </div>
  </div>
  <div class="button">
    <div class="content">
      <div class="icon">C</div>
      <div class="label">ABCDEFGHI</div>            
   </div>
  </div>
</div>

CSS

.widget {
    display:block;
    margin:0px;
    padding:0px;
}

.button {
    display:inline-block;
    border:1px solid red;
    margin:0px;
    padding:0px;
}

.content {
    display:table;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    border-spacing:0;
    border-collapse:collapse;    
}

.icon {
    display:table-cell;
    width:15px;
    height:15px;
    margin:0px;
    padding:0px;
    vertical-align:middle;
    text-align:center;
}

.label {
    display:table-cell;
    margin:0px;
    padding:0px;
    padding-left:3px;
    vertical-align:middle;
}

Trying to create a widget with buttons positioned next to each other but unsure about the spacing between the red boxes? Wondering how to remove it?

Appreciate any help, thank you!

htmlcss

Answer №1

When dealing with inline elements like the .button divs in your situation, it's important to be aware of how white space can affect their layout. There are several ways to eliminate this white space, such as:

  • Removing the space between the elements
  • Using HTML comments (<!-- -->) to fill the gap
  • Floating the elements to the left

For example, here's how you can remove white space between elements:

<div class="widget">
    <div class="button">
        <div class="content">
            <div class="icon">A</div>
            <div class="label">ABC</div>
        </div>
    </div><div class="button">
        <div class="content">
            <div class="icon">B</div>
            <div class="label">ABCDEF</div>
        </div>
    </div><div class="button">
        <div class="content">
            <div class="icon">C</div>
            <div class="label">ABCDEFGHI</div>
        </div>
    </div>
</div>

Check out this jsFiddle for a live example

Another approach is using HTML comments to address the issue:

<div class="widget">
    <div class="button">
        <div class="content">
            <div class="icon">A</div>
            <div class="label">ABC</div>
        </div>
    </div><!--
    --><div class="button">
        <div class="content">
            <div class="icon">B</div>
            <div class="label">ABCDEF</div>
        </div>
    </div><!--
    --><div class="button">
        <div class="content">
            <div class="icon">C</div>
            <div class="label">ABCDEFGHI</div>
        </div>
    </div>
</div>

Here's a jsFiddle demonstrating this method

Lastly, you can utilize float:

.button {
    display:inline-block;
    border:1px solid red;
    margin:0px;
    padding:0px;
    float:left;
}

View this jsFiddle to see float in action

To sum it up, while the issue isn't directly related to display:table-cell, understanding how white space affects inline and inline-block elements is crucial.

Answer №3

The unnecessary space is caused by using inline-block. Here's a simple workaround using font size:

.box {
    display:block;
    margin:0px;
    padding:0px;
    font-size: 0;
}

.button {
    display:inline-block;
    border:1px solid blue;
    margin:0px;
    padding:0px;
    font-size: initial;
}

Answer №4

In my opinion, it would be beneficial to include 

float:left

within the styling of 

.button

This adjustment would result in the following CSS code:

.button {
  display:inline-block;
  border:1px solid blue;
  margin:0px;
  padding:0px;
  float: left;
}

I believe implementing this change will have a positive impact. :)

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

Modifying the default actions of Material UI components: A step-by-step guide

In my project, I am using materialUI to showcase an Expansion Panel. Here is the code snippet: import React from 'react' import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelSummary from '@material-u ...

cssreactjsmaterial-ui

How to design a bell curve using CSS styling

Exploring CSS shape design, I am aiming to create a classic bell shape reminiscent of the holiday season. While the top and bottom balls are not essential to my design, here is the basic outline I'm striving for: This is what I have been able to achi ...

cssshapescss-shapes

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

jquerycss

Is it considered poor practice to modify a Bootstrap class in Bootstrap 4?

For instance: form-control appears like this Would it be considered inappropriate if I incorporate this scss code? .form-control { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ea ...

csstwitter-bootstrapsassbootstrap-4conventions

What is the process for creating a login page that redirects automatically?

For instance: Whenever I enter gmail.com, it automatically takes me to this link: https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmp ...

javascriptphphtmlhttp-redirect

When you hover the cursor over it, the material-ui icon button shines with an elliptical background effect

There seems to be a strange issue with the IconButton in @material-ui/core/IconButton that is causing a weird elliptical background to appear when hovering over it. https://i.stack.imgur.com/Xof8H.png Even after copying the code directly from the materia ...

cssreactjsmaterial-ui

Why does Node.js prompt an error when using document.querySelector? Is there an alternative method to document when utilizing express in my project?

An issue arose when attempting to select the form element using const weatherForm = document.querySelector('form') ^ Unfortunately, a ReferenceError was encountered: document is not defined at Object. (/Users/sheebadola/development/quadacademy/w ...

htmlnode.jsformsexpress

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss

What is the method for retrieving a PHP JSON variable value and displaying it in HTML?

Using the graph API, I managed to retrieve my Facebook friend list and received a JSON array as a response. The value of that array is stored in a variable like this: $json_output=($result['summary']['total_count']); echo "$json ...

javascriptphphtmljsonfacebook

Implementing the onEnded event handler for an HTML video element

I recently experimented with the video tag using flowplayer and I wanted to share my code below: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script> <!-- 2. flowplayer --> <script src="http://releas ...

jqueryhtmlvideoflowplayer

The measure of the leaflet map's vertical dimension in a Shiny module application

I'm facing an issue while trying to incorporate my small app as a module within my larger app. Everything seems to be working fine except for the height of the leaflet map. In the standalone app, I had: ui <- fluidPage( tags$style(type = "te ...

cssshinymoduleleafletheight

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

javascripthtmlcssangular

Looking for assistance in translating HTML code into an XpathQueryString?

While following a tutorial by raywenderlich on how to parse HTML in Xcode, I encountered an issue. I was able to parse his website successfully, but I'm struggling with the concept of Xpathquery. All I need is to extract the data from a table. Below i ...

htmliosobjective-c

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

javascriptjqueryhtmlbuttonhyperlink

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

When is the appropriate time to nest CSS class selectors within other class selector definitions?

REVISED 1 After receiving feedback, I made the following changes: .lower-container { justify-content: center; position: absolute; width: 92vw; // height: 46vh; <--- no set height /* nested classes for adjusting position and height of low ...

css

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

How to resolve the unusual spacing issue caused by Bootstrap?

I am encountering an issue with positioning two images on my website. I want one image to float all the way to the left of the viewport and the other to the right. However, there seems to be a strange space created on the right side of the right image. I a ...

htmltwitter-bootstrapbootstrap-5