padding inside d-flex bootstrap-CodePudding

i try to use padding inside d-flex to seperate the element that become one inside the d-flex class, but when i try to add padding, it's not working and change nothing, if i don't use the d-flex, the element won't become inline one by one so i need to use d-flex but in d-flex , the padding is not working, how to properly use it

code example :

            <div >

              <div >
              
                <button  style="" id="pageMenu" data-bs-toggle="dropdown"><i > </i></button>
                <ul  aria-labelledby="pageMenu">
                  <li><a  href="#">5</a></li>
                  <li><a  href="#">10</a></li>
                  <li><a  href="#">25</a></li>
                </ul>


              </div>

              <div >

              <button  style="" id="filterMenu" data-bs-toggle="dropdown"><i > Filter</i></button>
                <ul  aria-labelledby="filterMenu">
                  <li><a  href="#">Action</a></li>
                  <li><a  href="#">Another action</a></li>
                  <li><a  href="#">Something else here</a></li>
                </ul>

              </div>

            </div>

picture example :

CodePudding user response：

Padding will add space inside the border of the element. You can fix the issue by adding a class your-class in the flex container and giving a gap: 20px using CSS on the parent element. It will separate the elements from each other.

.your-class {
 gap: 20px
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<div >

  <div >

    <button  style="" id="pageMenu" data-bs-toggle="dropdown"><i > </i></button>
    <ul  aria-labelledby="pageMenu">
      <li><a  href="#">5</a></li>
      <li><a  href="#">10</a></li>
      <li><a  href="#">25</a></li>
    </ul>


  </div>

  <div >

    <button  style="" id="filterMenu" data-bs-toggle="dropdown"><i > Filter</i></button>
    <ul  aria-labelledby="filterMenu">
      <li><a  href="#">Action</a></li>
      <li><a  href="#">Another action</a></li>
      <li><a  href="#">Something else here</a></li>
    </ul>

  </div>

</div>