在包装内部的元素之间创建空闲空间

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>