Solution 1 :

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.

Solution 2 :

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


Problem :

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 (
      className={isActive ? "portrait portrait__active" : "portrait"}
      onMouseEnter={() => setIsActive(true)}
      onMouseLeave={() => setIsActive(false)}
      <img src={imageURL} alt="null" />

function App(){
  return (
    <div className="app">
      <div className="image-reel">
        <Portrait imageURL={""} />
        <Portrait imageURL={""}/>
        <Portrait imageURL={""}/>

// Render
  <App />,
.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=""></script>
    <script src=""></script>


Comment posted by Mint

Awesome, thank you!