sticks out the bottom of its wrapper

Question

I have a wrapper wrapping around 3 divs that are inline-block and all three divs are 128px high. There is no padding nor margin anywhere. The first div contains an image and ends up not the same height as the other two (lower by 3.3px).

 <div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
    <hr style={{width:"100%"}}/>
    <div>
      <div style={{display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
        <img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
      </div>
      <div style={{display:"inline-block",height:"128px",width:"*"}}>
        <span style={{display:"block"}}>Name of Product</span>
        <span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
        <span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
      </div>
      <div style={{display:"inline-block",height:"128px",float:"right"}}>
        <span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
      </div>
    </div>
    <hr style={{width:"100%"}}/>
  </div>

The code is written in JSX.
I've tried setting the wrapper to 128px, but the <img> is still sticking out the bottom
Why does the <img> act like that?

It seems like making all three divs float fixes the image sticking out, but since they're floated, the wrapper need a defined height — SirSoDerp, Jan 05 '18 at 21:02
You may want to post this code in HTML. A broader audience will be willing to help you if they do not first have to convert JSX to html. This also allows for people to create working JSFiddles to demonstrate their proposed changes. — Joe Hawkins, Jan 05 '18 at 21:03

score 0 · Accepted Answer · answered Jan 05 '18 at 21:09

Add verticalAlign:top to each of the three <div>'s style attributes. This align's inline-block elements along their top edges.

<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
    <hr style={{width:"100%"}}/>
    <div>
        <div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
            <img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
        </div>
        <div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
            <span style={{display:"block"}}>Name of Product</span>
            <span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
            <span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
        </div>
        <div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
            <span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
        </div>
    </div>
    <hr style={{width:"100%"}}/>
</div>

See My inline-block elements are not lining up properly for additional information.

sticks out the bottom of its wrapper

1 Answers1