inline元素中文字和背景显示的问题。

Question

inline水平元素中的文字在换行之后会占据padding的位置，这个文档是怎么解释的。

背景重叠的现象又是因为什么。

.w{
  width: 300px;
}
.a{
  background: red;
  padding: 10px;
}

<div class="w">
    <a href="" class="a"> 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈 哈</a>
</div>

Answer 1

inline元素的padding是根据行来算的不是整体算的，你设的padding:10px是每一行都是padding:10px，加个border: 1px solid red;和line-height就可以看出，内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，比如，我们设定一个内联元素border-bottom:1px solid red;时其表现是以每行进行重复，每一行下方都会有一条红色的细线。如果是块级元素那么所显示的的红线只会在块的下方出现。

Answer 2

同意，楼上的回答，再者，行内元素，一般不要设置背景，它的背景也是按行来叠加的；可以加border:1px solid #000。试一试。需要背景最好转成行内块元素或者块元素。