Unnecessary additional spacing caused by inline blocks in Firefox

On my webpage, I have organized my div elements using inline-block properties. Strangely, Firefox is adding extra spacing between two specific divs, while Safari and Chrome display the design consistently.

Check out this example here.

#main {
    display: block;
}
#sub11, #sub12, #sub21, #sub22,  #sub31, #sub32 {
    display: inline-block;
    background:red;
    padding:0;
    //margin-right:-4px;
    margin-top:3px;
    margin-bottom:3px;
}

In Firefox, there seems to be excessive space between the "GHI" and "TRY" rows, while the "ABC" and "GHI" rows are consistent with the others following "TRY".

cssfirefox

Answer №1

Here's the solution:

 display: inline-block;

If you want to display spaces, you need to add a float so they can be positioned next to each other.

Try adding:

float:left;

to your #sub11, and so on.

Answer №2

After encountering this question repeatedly, I discovered a comprehensive article on fixing the issue of space between inline-block elements on css-tricks. Originally designed for creating space between paragraphs, display: inline-block is now commonly used to align objects inline. The suggested solution involves adding a -4px margin-left in your CSS code, although it may be considered a bit unconventional.

#sub11, #sub12, #sub21, #sub22 {
    display: inline-block;
    font-size: 0;
    margin-left: -4px;
 }

Answer №3

When using inline-block, it's important to remember that white space between elements will be respected. One simple workaround is to add comment tags between your in-line elements.

Check out this example on jsFiddle

<div id="main">
    <div id="sub1">
        <div id="sub11">
            <div><h4>ABC</h4></div>
            <div>123</div>
        </div><!--
        --><div id="sub12">
            <div><h4>DEF</h4></div>
            <div>456</div>
        </div>
    </div>
   <div id="sub2">
        <div id="sub21">
            <div><h4>GHI</h4></div>
            <div>745</div>
        </div><!--
        --><div id="sub22">
            <div><h4>JKL</h4></div>
            <div>987</div>
        </div>
    </div>

</div>

Answer №4

For addressing a specific row, I implemented this CSS fix:

@-moz-document url-prefix() {
    #myRowID {margin-top:-5px;}
}

This resolved the peculiar problem I was encountering.

Answer №5

Everything is functioning as expected in this case. When using elements with the display property set to inline-block, they are meant to align with the text flow, so any spaces in your code will be reflected in the output.

To address this issue, you can either comment out the white space in your code or completely remove it, similar to the following example.

Another solution would be to change the display properties to block and apply float instead.

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

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

htmlcssfirefox

Three-column layout using CSS fluid design

The arrangement in Column B below does not look right. I successfully created a 3-column layout with the help of this resource. However, it assumes that fixed columns A and B have the same height or start at the same vertical position. In my case, B has an ...

csshtml

"Utilizing Bootstrap to position the right column at the top on a mobile platform

I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows: A ...

htmlcsstwitter-bootstrap

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

Is there a bug with the CSS Safari selector for elements focused together?

Looking for a solution using the element+element-Selector to modify CSS for an element following a button. This code snippet functions in Chrome, Edge, and Firefox but not Safari on MacOS: .button:focus+.change{ color: red; } <p>When you focus ...

csssafaricss-selectorsfocus

The text is not rendering properly, with some characters being replaced by different ones

RESOLUTION: To fix the issue, eliminate font-family, font-size, and color properties from the parent div. UPDATE: The problem only occurs when I press CTRL + F5. UPDATE 2: After investigating, I found that the culprit is .site-footer with a position:abso ...

htmlcsswordpresstextvisual-glitch

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly

Apologies if the title is unclear. In my design, I aim to implement a transition effect when the left or right buttons are clicked. However, the transition does not function as expected because the OnSuccess callback seems to occur before the page is rend ...

javascriptcssajaxasp.net-mvc

Learn how to dynamically switch the background image of a webpage using a button in AngularJS

Hey there, I'm currently working on incorporating interactive buttons into my website to give users the ability to customize the background. I've been experimenting with Angular to achieve this feature. So far, I've managed to change the ba ...

javascripthtmlcssangularjs

Filtering input that is compatible with Firefox

Attempting to restrict certain special characters (excluding "_" and "-") from being used in a text input field has been a bit of a challenge. I initially tried using regex filtering by pattern, but it didn't work as expected. Then I turned to dynami ...

javascriptjqueryhtmlfirefox

I'm having trouble with getting my Bootstrap CSS and JS links to function properly

The paths for the Bootstrap CSS and JS files have been included in the code, but unfortunately, they are not working. Instead, I am getting the following errors in the console: GET http://127.0.0.1:5000/[https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist ...

javascripthtmlcssflaskbootstrap-5

Latest FF 35 showing alert for blank field in HTML5 email input box

My form includes an email input field with a default value. When the user focuses on the field, it clears out if the value matches the default one. Upon blurring the element, the default value is restored if the field remains empty. In Firefox 35, clickin ...

javascriptjqueryhtmlvalidationfirefox

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

htmlcss

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

htmlcsssass

css optimizing image content for search engine visibility

My website's main page features a div with an image containing the message "contact us by calling 1 800 blabla..". I'm concerned that search engines may not be able to recognize or find my company's phone number since it is only displayed wi ...

cssimagehtmlsearch-engineinformation-retrieval

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

Navigate through the options on the left menu by sliding your

I'm attempting to create a menu that slides in a submenu from the left on hover, but the issue is that with this code, all submenus open instead of just the one related to the hovered link. Here is my HTML code: <ul id="NavMenu"> ...

javascriptjqueryhtmlcss

What is the main purpose of using the CSS transform:translate() property?

When CSS3 introduced animations with transition properties, it gave developers two main ways to change the position of an element. The first method involves setting the element's position as absolute and adjusting the left, right, top, and bottom prop ...

htmlcsstransition

Nested min-height in HTML is crucial for ensuring that parent

HTML: <div id="a"> <div id="b> </div> </div> CSS: html, body { height: 100%; background: red; margin: 0; } #a { min-height: 100%; background: green; } #b { min-height: 100%; background: y ...

htmlcss