将块元素的父元素设置为内联显示是不合法的吗？

Question

在内联元素中包含块元素是否有效？

例如：

<a href="#">
    <span></span>
</a>

span { display: block; }是否为内联时，<a>是否非法？

Answer 1

CSS规则不会以任何方式影响标记的有效性。

有关如何处理display: block元素中display: inline元素的规则，请参阅the CSS specification。

  

当内联框包含一个流内块级别框时，内嵌框（及其同一行框内的内联祖先）在块级框（以及任何连续的块级兄弟）中被打破。仅由可折叠的空白和/或流出元素分隔），将内联框分成两个框（即使任一边为空），块级框的每一边一个。中断前和中断后的行框都包含在匿名块框中，块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。

Answer 2

除了昆汀的回答，这是一种视觉方法。

<强> JSFiddle

<强> CSS：

h1 {
    font-size: 16px;
}

div { 
    border: 1px solid black;
    padding: 8px; margin: 12px; 
    background-color: #ccc; 
    width: 70% 
}

.test1 { 
    display: inline; 
    height: 25px;
    border: 1px solid red;
    background-color: white; 
}

.test2 { 
    display: block; 
    height: 25px;
    border: 1px solid red;
    background-color: white; 
}

.test3 {
    display: inline-block; 
    height: 25px;
    border: 1px solid red;
    background-color: white;
}