为什么跨度内的div不能正常工作？

Question

我正在编写以下HTML标记：

<span> Some Text
    <div id="ch">татата</div>
</span>

和样式：

span{
    border: 1px solid black;
    text-align:center;
    width: 300px;
    height: 300px;
    background: aqua;
}
#ch{
    width:100px;
    height:100px
    background: yellow;   
}

jsFiddle

1. 为什么height属性未应用于div内的span元素，但宽度已应用？
2. 为什么span的右边框丢失了？

Answer 1

您的标记不正确（加上Steini引用的分号丢失，为了完整答案而提及此）

回答1 ：span是一个inline元素，因此在div内span是一个坏主意，它也会如果你将span嵌套在span内并给出内部display:block属性，那就更好了！

回答2 ：将display:block添加到span以更改默认行为

working fiddle with correct markup

fiddle with the layout you wanted

Answer 2

因为您在semicolon之后错过height: 100px＆lt; - 您的css文件中缺少此;

Answer 3

范围display:inline您必须设置display:inline-block
但这不标准你必须使用div span总是用于文本 your fiddle demo

Answer 4

span是一个内联元素，因此它不会注意您的高度和宽度。为此你需要给它：

display:block;或display: inline-block

Answer 5

span是一个内联元素，而div则不是。你应该考虑交换它们。

Answer 6

第一个答案：你在高度风格之后忘记了分号，这就是为什么它没有渲染。

第二个答案：如果仔细观察，边框会出现在div之后。这是因为你 在内联元素中插入块级元素。因此，块级元素将它带到下一行，然后它占用整行。在下一行，您可以看到跨度的右边框。

将块级元素放在内联元素中是不好的做法。事实上，我认为这种结构没有任何实际用途。如果你正在学习，请纠正它。

Answer 7

默认情况下，div是一个块元素，而span是一个内联元素。块元素始终垂直流动，而内联元素始终从左上方到右下方彼此相邻，这取决于屏幕的宽度。 我们可以在block元素下使用内联元素，反之亦然。如果我们重写，我们期望在响应式布局上会看到类似这样的问题。