Image and button with same width percentage has different width

Question

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.

Add `box-sizing: border-box;` to the `` tag. Also see https://stackoverflow.com/questions/10722841/box-sizing-border-box-to-border-box-or-not-to-border-box-all-elements — kmoser, Apr 15 '22 at 05:19
I wished you answered instead of commenting, how do I close this question now? — Falling10fruit, Apr 15 '22 at 05:21

score 0 · Answer 1 · answered Apr 15 '22 at 05:23

0

<div style="display: flex; flex-direction: column; width:400px;">
        <img src="Assets/Blimp VB.png" alt="Preview of my second attempt to make a game" width="100%" 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: 100%;
          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>

try this code :)

answered Apr 15 '22 at 05:23

seunghee

51
5

No it doesn't work, also @kmoser already answered. – Falling10fruit Apr 15 '22 at 05:27
how about... set the percent in px? – seunghee Apr 15 '22 at 05:29
No, it doesn't work like that, and just like I said kmoser already fixed it by adding `box-sizing: border-box;` to the `` tag – Falling10fruit Apr 15 '22 at 05:31
1

When you put up an answer please don’t just show code but give an explanation of what it is doing and how it will overcome the problem. – A Haworth Apr 15 '22 at 05:32

Crystal · Accepted Answer · 2022-04-15T05:49:01.833

0

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>

edited Apr 15 '22 at 05:49

answered Apr 15 '22 at 05:45

Crystal

1,845
2
4
16

Can you please tell me what you've done to the code to achieve this? Since I can't clearly see what is going on when you smashed all of the style rules in one line – Falling10fruit Apr 15 '22 at 05:47
@Falling10fruit you have to put your border on the div give it a max-width that you want then inside you have to overlay all the overflow on it. make all inside of the div 100% because the parent div max width is 400px so that will follow it. hope this explains – Crystal Apr 15 '22 at 05:51

Image and button with same width percentage has different width

2 Answers2