Image and button with same width percentage has different width

April 15, 2022

I have this in my HTML file, you can see that the image tag and the button tag has the same width (40%) in the style attribute

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div style="display: flex; flex-direction: column;">
        <img src="Assets/Blimp VB.png" alt="Preview of my second attempt to make a game" width="40%" style="
        border: 2px solid black;
        border-bottom: none;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;">
                
        <button type="button" style="
          height: 100px;
          width: 40%;
          border: 2px solid black;
          border-top: none;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;"
        >2nd attempt to make a game</button>
    </div>
  </body>
</html>

And when I run the file, I the div looked like this:

Why is the image still wider than the tag? I’m assuming that the width doesn’t take account of the border, but then how do I fix this?

Also, I’m not promoting Blimp, I’m using that as a placeholder for the preview of the project.

>Solution :

Maybe you can try this way??

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div style="display: flex; 
                flex-direction: column;
                border:2px solid black;
                border-radius:20px;
                overflow:overlay;
                max-width:400px;">
        <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d" alt="Preview of my second attempt to make a game" width="100%" >
                
        <button type="button" 
           style="height:100px;
                  width:100%;
                  outline:0px solid;">2nd attempt to make a game</button>
    </div>
  </body>
</html>