svg and img adds an extra space above div element

Issue

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

You can see that the space is only present on buttons with an icon

Here is the css for the button element, block and header component


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;
}

and here is the html code


    <div class="header block">
      <button></button>
      <button class="">
        <img src="assets/score.svg"/>
      </button>
      <button class="button-off-dark">
        <img src="assets/score.svg"/>         
      </button>
      <button class="button-off-dark">
        <img src="assets/score.svg"/>        
      </button>
    </div>

And here are the icons (score.svg) taken from Figma

        <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> 

So far, I’ve tried to change the display to block, use vertical align:top.

It seems to be linked to the component heigth because upon removing the constrains, the extra space dissapear. Howerver I need the button to have a heigth of 40px.

I haven’t been able to find another solution so far.

Solution

You need to add vertical-align to the buttons css, as buttons are inline block by default state. And inline block elements are aligne to the baseline to the content.

enter image description here

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 class="header block">
  <button></button>
  <button>A</button>
  <button class="">
        <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 class="button-off-dark">
      <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>

Answered By – Dakshank

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published