Home > Software engineering >  how can i change the gap of only element
how can i change the gap of only element

Time:03-12

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 set margin-left and margin-right (or margin-inline-start and margin-inline-end).

    • For flex-direction: vertical you'll want to set margin-top and margin-bottom (or margin-block-start and margin-block-end).

    • To have a larger effective gap then set any positive margin value.

      • e.g. with gap: 5px and margin-left: 1px then the effective gap to the left will be 6px.
    • To have a smaller effective gap then enter image description here


      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>

  • Related