如何在每个列框之间添加空格

Question

I just wanna ask how to add a white space between each column boxes. I've been trying to figure it out for the past hour but I was not able to find an answer. Here is the code:

HTML:

<div class="row">
    <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
        <h2>Column 2</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
    </div>
    <div class="column" style="background-color:#bbb;">
        <h2>Column 4</h2>
        <p>Some text..</p>
    </div>

CSS

.column {
    float: left;
    width: 25%;
    padding: 15px;
    height: 300px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

Answer 1

Consider using either CSS Grid or CSS Flex-box for your layout; either of those options will allow you to specify the gap (formerly grid-gap , but since changed to work with both Grid and Flex-box) between items; for example with Grid:

 document.querySelector('button').addEventListener('click', (e) => { let source = document.querySelector('.row'); [...source.cloneNode(true).children].forEach( (el) => source.append(el) ); });

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } .row { /* triggers the use of CSS grid layout: */ display: grid; /* defines four columns each of which is 1fr - one fractional unit of the available space: */ grid-template-columns: repeat(4, 1fr); /* defines a gap of 0.2em above and below each grid-row, and of 1em between adjacent grid- columns: */ gap: 0.2em 1em; counter-reset: columnCount; } .column { padding: 15px; height: 300px; counter-increment: columnCount; } h2::after { content: ' ' counter(columnCount); }

 <button>Add more content to the row</button> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div>

Or, with Flex-box; note that with flex-box the gap property doesn't take effect until the contents are sufficiently closely-packed that the space-between declaration of justify is insufficient to keep them separated:

 document.querySelector('button').addEventListener('click', (e) => { let source = document.querySelector('.row'); [...source.cloneNode(true).children].forEach( (el) => source.append(el) ); });

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } .row { /* triggers the use of css flex-box layout: */ display: flex; /* allows the content of the .row element(s) to wrap to new lines as required: */ flex-wrap: wrap; /* evenly spaces the child elements of .row across the available space (so, by default, the items are separated visually from each other): */ justify-content: space-between; /* when the children of the .row element are too numerous to be spread apart by the use of 'justify: space-between' the gap forces the gap between horizontal 'rows' of 0.2em and between 'columns' of 1em: */ gap: 0.2em 1em; counter-reset: columnCount; } .column { padding: 15px; height: 300px; counter-increment: columnCount; } h2::after { content: ' ' counter(columnCount); }

 <button>Add more content to the row</button> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div> </div>

CSS Multi-column is a little different and, currently, less easily used and styled for layout; but it does allow some appropriate customisation:

 document.querySelector('button').addEventListener('click', (e) => { let source = document.querySelector('.row'); [...source.cloneNode(true).children].forEach( (el) => source.append(el) ); });

 *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } .row { /* setting a column-count property causes the browser to use a multi-column layout for the element, and the child elements of that element will be placed into the appropriate columns (though some fine- tuning may be required): */ column-count: 4; /* sets a 1em gap between adjacent columns: */ column-gap: 1em; counter-reset: columnCount; } .column { padding: 15px; height: 300px; counter-increment: columnCount; } h2::after { content: ' ' counter(columnCount); }

 <button>Add more content to the row</button> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column</h2> <p>Some text..</p> </div> </div>

References:

• column-count .
• column-gap .
• flex-wrap .
• gap .
• justify-content .
• repeat() .

Bibliography:

• " A Complete Guide to Flexbox ."
• " A Complete Guide to Grid ."
• " Basic Concepts of Flexbox ."
• " Basic Concepts of Grid Layout ."
• " CSS Multi-column Layout ."
• " When and How to Use CSS Multi-Column Layout ."