I’m a beginner.
What I’m curious about is the size of an inline element.
I’ve heard that the size of an inline is determined by the content of the inline element or the size of its child element.
The container(span) doesn’t have the same size as the canvas.
When I checked with the dev tool, the height of the span was only 21px and the size of the canvas was 400px.
I thought the container would take up the same size as its child element, canvas.
What’s wrong?
<body>
<span class="container">
<canvas id="screen"></canvas>
</span>
<script src="index.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: wheat;
height: 100vh;
min-height: 100vh;
}
.container {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#screen {
position: relative;
border: 3px solid white;
}
const canvas = document.querySelector("canvas");
canvas.style.width = "600px";
canvas.style.height = "400px";