为div添加class样式正常，为span添加却出现异常结果的技术咨询

为什么会出现差异？ #

这是块级元素和行内元素的本质特性导致的：

• div是块级元素：默认独占一行，margin、padding、border这些盒模型属性能正常生效，而且可以合法包含h2、p这类其他块级元素。
• span是行内元素：默认在文本流里横向排列，上下方向的margin、padding不会改变自身的垂直占位空间；更关键的是，HTML规范里行内元素不能直接包含块级元素（你代码里span套了h2和p），浏览器会自动修正这个非法结构，最终导致样式表现混乱。

两种解决办法 #

办法1：把span转为块级元素 #

给.city类添加display: block;，强制让span拥有块级元素的特性，这样盒模型样式能正常生效，也能合法包含块级子元素：

<html>
<head>
<style>
.city {
  background-color: tomato;
  color: black;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
  display: block; /* 新增这行，将元素转为块级 */
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div> 

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

<span class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</span> 

</body>
</html>

办法2：替换span为合适的块级容器 #

既然要包裹h2、p这类块级内容，直接用div（或者section这类语义化标签）更符合HTML规范，不需要额外修改样式：

<!-- 把span替换成div，结构和样式都会正常 -->
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

额外提示 #

行内元素（比如span、a、em）适合用来包裹小段文本或其他行内元素；块级元素（比如div、section、p）才是用来构建页面布局、包含块级内容的正确选择，遵循这个规则能避免很多不必要的样式问题。

内容的提问来源于stack exchange，提问作者Saumil Gupta