i am creating something with css flexbox and use gap to give spacing between elements but now i want to change the spacing of only one element like
.container{
display: flex;
gap: 20px;
}
.items{
width: 100px;
height: 100px;
background: red;
}
.item-4{
background: blue;
}
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
Now I want to change the gap of blue box to 5px from 20px is there any way to do this
CodePudding user response:
The
gap
property only applies to flex-parents, not flex-items.To adjust the spacing of flex-items use an overridden
margin
property instead.For
flex-direction: horizontal
you'll want to setmargin-left
andmargin-right
(ormargin-inline-start
andmargin-inline-end
).For
flex-direction: vertical
you'll want to setmargin-top
andmargin-bottom
(ormargin-block-start
andmargin-block-end
).To have a larger effective gap then set any positive margin value.
- e.g. with
gap: 5px
andmargin-left: 1px
then the effective gap to the left will be6px
.
- e.g. with
To have a smaller effective gap then
Like so:
.container{ display: flex; gap: 20px; } .items{ width: 100px; height: 100px; background: red; } .item-4 { background: blue; margin-left: -15px; /* Adapt 20px gap to 5px */ margin-right: -15px; /* Adapt 20px gap to 5px */ }
<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div>
CodePudding user response:
.container{ display: flex; gap: 20px; } .items{ width: 100px; height: 100px; background: red; } .item-4{ background: blue; margin-left: -15px; }
<div > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div>