スクロールでdivの最後の要素に余白を与えることはできませんか？

Question

私はタブとして使用するいくつかのサブディビジョンとdivを持っています。私の親ディビットは水平スクロールを持っています。

.parent { 
 
    display: flex; 
 
    overflow-x: auto; 
 
    padding: 15px 0 20px; 
 
} 
 

 
.tab { 
 
    font-size: 15px; 
 
    text-transform: uppercase; 
 
    padding: 10px 40px; 
 
    color: #a4b5bf; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
    <div class="tab">Tab 1</div> 
 
    <div class="tab">Tab 2</div> 
 
    <div class="tab">Tab 3</div> 
 
    <div class="tab">Tab 4</div> 
 
</div>

問題は、私は最後の要素の上マージン権を設定したいときには、それだけで文句を言わないのdivの端から移動し、..です。彼は、マージンを取得します。このような何かあなたはインスペクタでそれを見るが、動きません。

Answer 1

ディスプレイ：フレックス;子どもにマージンを与えるのを防ぐ。あなたが望むものに到達するには、透明なボーダーを使用できます。

 

    .tab:last-child { 
     border-right: 30px solid transparent; 
    }