在絕對定位和轉換元素中添加邊距

Question

我有一組絕對定位元素，其尺寸測量值爲rem's，並且使用transform: translateX對齊。

我需要在1rem之間添加空格，但margin-right/margin-left屬性不起作用，我似乎無法找到解決方案。

CodePen：https://codepen.io/pen/

CSS

.box { 
    height: 6rem; 
    width: 6rem; 
    background: blue; 
    display: inline-block; 
    position: absolute; 
} 

.box2 { transform: translateX(100%); background: red; } 
.box3 { transform: translateX(200%); background: yellow; } 
.box4 { transform: translateX(300%); } 

HTML

<div class="box box1"></div> 
<div class="box box2"></div> 
<div class="box box3"></div> 
<div class="box box4"></div> 

Answer 1

如果你這樣做的方式，定位是最好的我不知道。如果您必須使用transform進行編碼，並且因爲保證金不適用於絕對元素，則可以使用Left或calc()屬性，如下所示。
爲什麼不使用float財產或display: flex而不是？

.box {height: 6rem; 
 
width: 6rem; 
 
background: blue; 
 
display: inline-block; 
 
position: absolute; 
 
} 
 

 
.box2 {transform: translateX(calc(100% + 1rem)); background: red;} 
 
.box3 {transform: translateX(calc(200% + 2rem)); background: yellow;} 
 
.box4 {transform: translateX(calc(300% + 3rem));}

<div class="box box1"></div> 
 
<div class="box box2"></div> 
 
<div class="box box3"></div> 
 
<div class="box box4"></div>

Answer 2

的absolutey定位的元素的利潤率有其他元素沒有任何影響，所以你必須要改變任何位置設置在它們之間創造空間，或（在你的情況下）適用left設置他們進一步將他們從原來的位置移開。但是，您必須增加每個元素的這些元素，因爲這仍然與其他元素不受其影響的原始位置相關：在我的示例中，我將第一個元素放在第二個元素上，第二個元素上放置2rem，第四個元素上放置3rem，實現1它們之間的距離REM：

html, body { 
 
margin: 0; 
 
} 
 
.box { 
 
    height: 6rem; 
 
    width: 6rem; 
 
    background: blue; 
 
    display: inline-block; 
 
    position: absolute; 
 
} 
 

 
.box2 { 
 
    left: 1rem; 
 
    transform: translateX(100%); 
 
    background: red; 
 
} 
 

 
.box3 { 
 
    left: 2rem; 
 
    transform: translateX(200%); 
 
    background: yellow; 
 
} 
 

 
.box4 { 
 
    left: 3rem; 
 
    transform: translateX(300%); 
 
}

<div class="box box1"></div> 
 
<div class="box box2"></div> 
 
<div class="box box3"></div> 
 
<div class="box box4"></div>