在包裝內部的元素之間創建空閒空間

Question

在CSS頁邊空白中會覆蓋頂部和底部邊距。我需要達到這個結果左端的權利。

- 編輯 -

元素應該靠左對齊，

請看例子：

.a{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid red; 
 
} 
 
.b{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid green; 
 
} 
 
.c{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid blue; 
 
} 
 
.root{ 
 
display: flex; 
 
    border: 1px solid black; 
 
}

<div class="root"> 
 
<div class="a"> 
 
</div> 
 
<div class="b"> 
 
</div> 
 
<div class="c"> 
 
</div> 
 
</div>

在這種情況下，我需要有：

.a爲12像素

12px的

.c左邊距右邊距如果只是.a和.b我需要：

.a右邊緣12像素。

如果將內部.root n元素，我需要有：

.element1右邊距爲6像素

.element2左右邊距爲6像素

6像素

.element3左右邊距

.element4左右邊距爲6px

..... 

.elementn用於元件之間的6像素

摘要餘量左邊距應爲12像素。但是第一個元素不應該有左邊距，最後一個元素不應該有右邊距。

我說明了如何手動執行，是否可以將它設置爲CSS，如果來自CSS級別，我不知道有多少元素？

Answer 1

總的來說，我用JavaScript進行內部元件數並添加正確的類號。

在CSS：

@margin: calc(@default_margin/2); 


    .row{ 
    margin: 0 @margin; 
    } 
    .row:first-child{ 
    margin-right: @margin; 
    margin-left: 0; 
    } 
    .row:last-child{ 
    margin-left: @margin; 
    margin-right: 0; 
    } 
    .column-2{ 
    .row:first-child{ 
     margin-left: 0; 
    } 
    .row:last-child{ 
     margin-right: 0; 
    } 
    } 
    .column-1{ 
    .row:first-child{ 
     margin: 0; 
    } 
    } 

Answer 2

這將做

.root 
 
{ 
 
    display:flex; 
 
    justify-content:space-between; 
 
} 
 

 
.a{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid red; 
 
} 
 
.b{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid green; 
 
} 
 
.c{ 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 12px; 
 
    border: 1px solid blue; 
 
} 
 
.root{ 
 
display: flex; 
 
    border: 1px solid black; 
 
}

<div class="root"> 
 
<div class="a"> 
 
</div> 
 
<div class="b"> 
 
</div> 
 
<div class="c"> 
 
</div> 
 
</div>

Answer 3

答案顯然是設置半你需要爲每個除第一個孩子的保證金。

無法摺疊水平邊距。所以如果你想要一個12px的空白，你需要在所有的孩子上設置一個6px的左/右邊距，但是在該行的第一個元素上有一個額外的6px。

.a { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 6px 0 12px; 
 
    border: 1px solid red; 
 
} 
 

 
.b { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 6px; 
 
    border: 1px solid green; 
 
} 
 

 
.c { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 6px; 
 
    border: 1px solid blue; 
 
} 
 

 
.root { 
 
    display: flex; 
 
    border: 1px solid black; 
 
}

<div class="root"> 
 
    <div class="a"> 
 
    </div> 
 
    <div class="b"> 
 
    </div> 
 
    <div class="c"> 
 
    </div> 
 
</div>