html2canvas white space at the bottom

Question

I wrote this code in react

      function download(element) {
        html2canvas(element).then((canvas) => {
          window.open(canvas.toDataURL('image/png'));
    });
  }

  return (
    <div className='box' onClick={(e) => download(e.target)}>
      <h2>
        <img src={logo} alt='logo' draggable='none' />
        {title}
      </h2>
      <p>{text}</p>
    </div>
  );

and css

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#root {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding-top: 2em;
  padding-bottom: 2em;
}

.boxContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}

.box {
  background-color: #212120;
  width: 600px;
  padding: 0.9em;
  cursor: pointer;
}

.box h2,
.box p {
  --color: rgb(218, 218, 218);
  font-size: 1.5em;
  font-weight: 400;
  color: var(--color);
}
...

The purpose of this code is to open a screenshot of a element. The code works however at the bottom the screenshot there is a white space (around 2px high). How can I remove it ? Thank you :)

Image

Answer 1

This space comes from h2 tag. It is required by letters like "g" or "y". You can use line-height: 0 to remove it.

In many cases "2px bottom problem" comes from the img tag. It is display: inline by default. You can use display: block and move it out of h2.