内联元素的大小不是由其子元素的大小决定的吗？

Question

我是初学者。

我很好奇的是

inline element

的大小。

我听说内联元素的大小是由内联元素的

content

或其

child element

的大小决定的。

container

（跨度）与

canvas

的大小不同。

当我用开发工具检查时，跨度的高度只有

21px

，画布的大小是

400px

。

我认为

container

会占据与它的

child element

画布相同的大小。

怎么了？

<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";

Answer 1

我明白发生这种情况的原因是，当您使用 JavaScript 设置

canvas

的宽度和高度时，您只会影响

canvas

，而不是其父级

span

。父级

span

作为内联元素，不会扩展以完全包含块级

canvas

。通过将

display

的

span

更改为

inline-block

或

block

，它现在将扩展以适合

canvas

。

使

span

匹配
canvas
尺寸

将
```
span
```
更改为块级元素，如
```
div
```
。
通过添加
```
span
```
或
```
display: inline-block;
```
```
，使 
```
display: block;

    .container {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}

.container {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    background-color: green;
    padding: 10px;
}

.child{
  background-color: red;
  width: 400px;
}

<span class="container">

<div class="child">
<p1>hello</p1>
</div>

</span>

内联元素的大小不是由其子元素的大小决定的吗？

问题描述投票：0回答：1

1个回答

最新问题

内联元素的大小不是由其子元素的大小决定的吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1