Four identical columns with no outer margin and evenly spaced inner margins

This is a variation of the discussion on removing right and left border space in table-cell display elements.

Despite attempting to use divs with equal inner margins, I encountered unexpected spacing causing the last div to wrap.

You can view my attempt at a solution here: https://jsfiddle.net/kyy7qgLz/1/

* {
    margin: 0;
    padding: 0;
    border: 0;
}
#container {
    width: 100%;
    background-color: blue;
}
.item {
    margin-left: 4%;
    width: 22%;
    display: inline-block;
    background-color: red;
}
.item:first-of-type {
    margin-left: 0%;
}

<div id="container">
    <div class="item">
        Text 1
    </div>
    <div class="item">
        Text 2
    </div>
    <div class="item">
        Text 3
    </div>
    <div class="item">
        Text 4
    </div>
</div>

I am seeking insights on the source of the extra spacing issue and how to eliminate it. Can anyone provide guidance?

htmlcss

Answer №1

If you want to ensure inline-block elements are not spaced out, you should either comment or remove the space or new line between your HTML elements:

<div id="container">
    <div class="item">
        Text 1
    </div><!--
    --><div class="item">
        Text 2
    </div><<!-- 
    --><div class="item">
        Text 3
    </div><<!-- 
    --><div class="item">
        Text 4
    </div>
</div>

Answer №2

The best way to achieve a clean layout is by utilizing flexbox. When you apply display: inline-block, you are essentially telling the browser to treat these elements as text blocks, which is why it preserves the white space between your HTML elements.

Instead, if you use display: flex on the container, you are accurately indicating the intended layout. By doing this, you are specifying that the direct children of the container should adhere to a flex layout rather than a layout suited for text.

* {
    margin: 0;
    padding: 0;
    border: 0;
}
#container {
    background-color: blue;
    display: flex;
}
.item {
    margin-left: 4%;
    flex: 1 0 auto;
    background-color: red;
}
.item:first-of-type {
    margin-left: 0%;
}
<div id="container">
    <div class="item">
        Text 1
    </div>
    <div class="item">
        Text 2
    </div>
    <div class="item">
        Text 3
    </div>
    <div class="item">
        Text 4
    </div>
</div>

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

The troubleshooting guide for resolving compatibility issues with a background video across various browsers

Something strange occurred. My background video was functioning properly on all browsers until this morning. However, it suddenly stopped working on certain browsers. The video either does not play or freezes immediately. I tried clearing my cache, rever ...

javascripthtmlcssvideobackground

Click on the submenu to expand it, then simply select the desired option to navigate

I have created a toggle menu that displays a list of child elements when clicked, and hides them if clicked again. However, when a child element is clicked, I want it to navigate to the corresponding page. I am having trouble getting this functionality to ...

javascriptjqueryhtmlcss

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

javascripthtmlangularjs

Styling elements with CSS

I've been attempting to align a button to the right of another button. The example above illustrates what I'm trying to achieve. I used Bootstrap to build it, which has a useful navbar feature for layout. However, despite my efforts to use right ...

javascripthtmlcss

Using a loop to draw lines on a canvas

Gaining a preliminary understanding of java-script and canvas. I have managed to create steps and draw the initial two lines. I aim for this sequence to repeat 7 times. 7 p1's and 6 p2's in essence, it descends 7 times and moves across ...

javascripthtmlcanvas

Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...

htmlcss

ngx-bootstrap encountered an issue: TypeError - _co.openModal is unavailable as a function

Just starting out with ngx-bootstrap, I was attempting to create a modal using the instructions from this site : However, I encountered the following error: ERROR TypeError: _co.openModal is not a function Here are some code snippets: //app.component ...

htmlangularfunctionngx-bootstrap

Equally distribute grid column width inside container according to their content dimensions

I am facing a challenge with my side-by-side grid columns. I want the grid to always be the width of its container, ensuring that as much content from each column is visible as possible within that space. In my demo, the grid is currently set at 300px wid ...

htmlcsscss-grid

What steps can I take to correct the footer positioning to appear below the sidebar?

I'm currently struggling with the placement of my sidebar on top of my footer, which is not where it belongs. I would like to move it to the bottom. Take a look at this image for a visual representation of what I'm aiming for. footer { paddi ...

htmlcss

I'm having trouble getting the "flex direction: row" property to work within a table row

First, I applied flex to the table > tr. Next, I configured the flex-direction to be row. table { width: 100%; } tr { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width:100%; } td:nth-child(1) { flex: 0 0 20%; ...

htmlcssflexbox

Displaying Bootstrap 4 dropdown menu on hover

I've noticed that the dropdown menus in Bootstrap 4 are triggered by click by default, but for some reason, my menu is appearing on hover without any additional CSS or JS. This poses a problem for mobile development. I could create a jQuery solution, ...

javascriptcssbootstrap-4

Retrieve the radio button value from the HTML form

This website is designed to calculate ideal weight based on input data, but I am encountering an issue with the gender selection. The code seems to only recognize the first condition for female, while ignoring the else if condition for male. How can I fix ...

javascripthtml

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

htmlcssbootstrap-4

Tips for obtaining immediate model updates within Agility.js

I am currently facing an issue with Agility.js regarding the 'change' event. This event is triggered every time a model within the object is modified. However, in my case, the model only gets updated when losing focus or pressing enter. I would l ...

javascriptjqueryhtml

Set the DIV element to match the height of its container

I'm currently using this HTML code, and it's functioning correctly. However, I would like the height of the div to adjust dynamically based on the tab's content, rather than specifying a fixed height of 200px. Using a percentage value for th ...

cssvue.js

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

c#htmlasp.net-mvcasp.net-mvc-5

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

Several pictures are not displaying in the viewpage

I have a controller method set up to fetch files from a specific folder. public JsonResult filesinfolder(ProductEdit model) { string productid = "01"; string salesFTPPath = "C:/Users/user/Documents/Visual Studio 2015/Projects/root ...

jqueryhtmlasp.net-mvcrazor

Utilizing jQuery's multiple pseudo selectors with the descendant combinator to target specific elements

My code includes the following: <div class="a"><img></div> and <div class="b"><img></div> I want to dynamically enclose img tags with a div and utilize $(":not('.a, .b) > img") for ...

jquerycss

Print the page number using HTML and PHP

Is there a way to center page numbers in HTML? I have the code below that echoes the numbers, but they always appear on the left side of the page. I tried wrapping them in a div to center them, which worked, but then each number is enclosed in its own d ...

phphtmlcssecho