remove whitespace between image and container

Question

I'm creating an image preview reel and everything is working but I have this annoying bit of white space at the bottom of my divs that I cant seem to get rid of. How do I remove the white space so that the image is flush with the border. It seems like the portrait div is growing a little taller than the image. I'm a noob with css.

// hooks
const {useState} = React;

function Portrait({imageURL}){
  const [isActive, setIsActive] = useState(false);
  return (
    <div 
      className={isActive ? "portrait portrait__active" : "portrait"}
      onMouseEnter={() => setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
    >
      <img src={imageURL} alt="null" />
    </div>
  )
};

function App(){
  return (
    <div className="app">
      <div className="image-reel">
        <Portrait imageURL={"https://i5.walmartimages.com/asr/ce983030-a0bb-4e13-bb83-29ae50035fba_1.a665a27d20527eeea2c77f70b37aa20f.jpeg"} />
        <Portrait imageURL={"https://i5.walmartimages.com/asr/deccf988-3aae-4c1e-97fd-252c8977f632_1.8d763d67304504ffbb78dca54fe695ef.jpeg"}/>
        <Portrait imageURL={"https://i5.walmartimages.com/asr/02f515ee-2ee3-4c01-bc32-344740ab75e5_1.937706abcf59a2ae36b3a21b8938a6a4.jpeg"}/>
      </div>
    </div>
  )
}

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.app {
  flex: 1;
}

.image-reel__col {
  display: flex;
  flex-direction: column;
}

.portrait {
  width: 75px;
  border-bottom: 2px solid transparent;

}

.portrait > img {
  max-width: 100%;
}

.portrait__active {
  cursor: pointer;
  border-bottom: 2px solid black;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Answer 1

As a default there is a default values in css (margin, padding, box-sizing). You have to give 0 values to these css codes before starting any project. It should help you

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

Answer 2

Set line-height: 0; on your portrait, otherwise the browser will try to adjust the height in case you'll put some text next to the image.