In my HTML document, I noticed that the image tag and button tag both have a width of 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 create 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;"
>Second attempt at creating a game</button>
</div>
</body>
</html>Upon running the file, the div appeared like this:
https://i.sstatic.net/C2CiF.png
I observed that the image is still wider than the button. It seems that the width setting does not consider the border. How can I resolve this issue?
Just to clarify, the reference to Blimp is simply a placeholder for the project preview and not meant as promotion.