svg and img adds an extra space above div element-CodePudding

I am creating a header for a chrome extension, but upon implementing the icons an unknow space is added as shown below

button {
    box-shadow: -4px -4px 10px rgba(56, 68, 90, 0.1), 4px 4px 10px #252B39;
    border-radius: 10px;
    text-align: center;
    border: none;
}

.block {
    box-shadow: 0px -20px 60px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}


.header {
    text-align: center;
    height: 60px;
    width: 100%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.header button {
    margin: 10px 15px 0;
    width: 40px;
    height: 40px;
    vertical-align: top;
}

<div >
  <button></button>
  <button>A</button>
  <button >
        <svg width="30" height="26" viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_685_136)">
          <path d="M26.9697 21.5303C27.2626 21.8232 27.7374 21.8232 28.0303 21.5303C28.3232 21.2374 28.3232 20.7626 28.0303 20.4697L26.9697 21.5303ZM26.1553 18.5947C25.8624 18.3018 25.3876 18.3018 25.0947 18.5947C24.8018 18.8876 24.8018 19.3624 25.0947 19.6553L26.1553 18.5947ZM8.75 14.25C9.16421 14.25 9.5 13.9142 9.5 13.5C9.5 13.0858 9.16421 12.75 8.75 12.75V14.25ZM2.5 12.75C2.08579 12.75 1.75 13.0858 1.75 13.5C1.75 13.9142 2.08579 14.25 2.5 14.25V12.75ZM8.75 8C9.16421 8 9.5 7.66421 9.5 7.25C9.5 6.83579 9.16421 6.5 8.75 6.5V8ZM2.5 6.5C2.08579 6.5 1.75 6.83579 1.75 7.25C1.75 7.66421 2.08579 8 2.5 8V6.5ZM18.75 1.75C19.1642 1.75 19.5 1.41421 19.5 1C19.5 0.585786 19.1642 0.25 18.75 0.25V1.75ZM2.5 0.25C2.08579 0.25 1.75 0.585786 1.75 1C1.75 1.41421 2.08579 1.75 2.5 1.75V0.25ZM28.0303 20.4697L26.1553 18.5947L25.0947 19.6553L26.9697 21.5303L28.0303 20.4697ZM26.75 13.5C26.75 17.2279 23.7279 20.25 20 20.25V21.75C24.5563 21.75 28.25 18.0563 28.25 13.5H26.75ZM20 20.25C16.2721 20.25 13.25 17.2279 13.25 13.5H11.75C11.75 18.0563 15.4437 21.75 20 21.75V20.25ZM13.25 13.5C13.25 9.77208 16.2721 6.75 20 6.75V5.25C15.4437 5.25 11.75 8.94365 11.75 13.5H13.25ZM20 6.75C23.7279 6.75 26.75 9.77208 26.75 13.5H28.25C28.25 8.94365 24.5563 5.25 20 5.25V6.75ZM8.75 12.75H2.5V14.25H8.75V12.75ZM8.75 6.5H2.5V8H8.75V6.5ZM18.75 0.25H2.5V1.75H18.75V0.25Z" fill="white"/>
          </g>
          <defs>
          <filter id="filter0_d_685_136" x="-2.25" y="0.25" width="34.5" height="29.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feOffset dy="4"/>
          <feGaussianBlur stdDeviation="2"/>
          <feComposite in2="hardAlpha" operator="out"/>
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_685_136"/>
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_685_136" result="shape"/>
          </filter>
          </defs>
        </svg>          
      </button>
  <button >
      <svg width="30" height="26" viewBox="0 0 30 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g filter="url(#filter0_d_685_136)">
          <path d="M26.9697 21.5303C27.2626 21.8232 27.7374 21.8232 28.0303 21.5303C28.3232 21.2374 28.3232 20.7626 28.0303 20.4697L26.9697 21.5303ZM26.1553 18.5947C25.8624 18.3018 25.3876 18.3018 25.0947 18.5947C24.8018 18.8876 24.8018 19.3624 25.0947 19.6553L26.1553 18.5947ZM8.75 14.25C9.16421 14.25 9.5 13.9142 9.5 13.5C9.5 13.0858 9.16421 12.75 8.75 12.75V14.25ZM2.5 12.75C2.08579 12.75 1.75 13.0858 1.75 13.5C1.75 13.9142 2.08579 14.25 2.5 14.25V12.75ZM8.75 8C9.16421 8 9.5 7.66421 9.5 7.25C9.5 6.83579 9.16421 6.5 8.75 6.5V8ZM2.5 6.5C2.08579 6.5 1.75 6.83579 1.75 7.25C1.75 7.66421 2.08579 8 2.5 8V6.5ZM18.75 1.75C19.1642 1.75 19.5 1.41421 19.5 1C19.5 0.585786 19.1642 0.25 18.75 0.25V1.75ZM2.5 0.25C2.08579 0.25 1.75 0.585786 1.75 1C1.75 1.41421 2.08579 1.75 2.5 1.75V0.25ZM28.0303 20.4697L26.1553 18.5947L25.0947 19.6553L26.9697 21.5303L28.0303 20.4697ZM26.75 13.5C26.75 17.2279 23.7279 20.25 20 20.25V21.75C24.5563 21.75 28.25 18.0563 28.25 13.5H26.75ZM20 20.25C16.2721 20.25 13.25 17.2279 13.25 13.5H11.75C11.75 18.0563 15.4437 21.75 20 21.75V20.25ZM13.25 13.5C13.25 9.77208 16.2721 6.75 20 6.75V5.25C15.4437 5.25 11.75 8.94365 11.75 13.5H13.25ZM20 6.75C23.7279 6.75 26.75 9.77208 26.75 13.5H28.25C28.25 8.94365 24.5563 5.25 20 5.25V6.75ZM8.75 12.75H2.5V14.25H8.75V12.75ZM8.75 6.5H2.5V8H8.75V6.5ZM18.75 0.25H2.5V1.75H18.75V0.25Z" fill="white"/>
          </g>
          <defs>
          <filter id="filter0_d_685_136" x="-2.25" y="0.25" width="34.5" height="29.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
          <feFlood flood-opacity="0" result="BackgroundImageFix"/>
          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
          <feOffset dy="4"/>
          <feGaussianBlur stdDeviation="2"/>
          <feComposite in2="hardAlpha" operator="out"/>
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_685_136"/>
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_685_136" result="shape"/>
          </filter>
          </defs>
        </svg> 
      </button>
</div>

CodePudding user response：

you can set display to flex, if you want the icons to be horizontally centered use justify-content

.header {
text-align: center;
height: 60px;
width: 100%;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
display: flex;
justify-content: center;

}