css设置中增加border属性设置，div区域的内容无法居中。求助，求助。

Question

问题是这样的
1我本来想用类选择器lne加一个水平分割线，加了显示在上面，且我设置了padding为0，还是有段距离。
2我索性就将div的区域的宽和高直接设置了，如下面展示。都没什么问题，问题就在于我加了border属性后，文本内容不在div之中了，删除border就又好了。我不知道是因为什么，难道border上下还占据大小的。
希望懂的人给详细解答下。

![图片说明](https://img-ask.csdn.net/upload/201910/13/1570959934_388628.png)


.lne{

width: 600px;
height: 32px;
line-height: 32px;
margin: 40px;
padding:0px;
background-color: #999;
 border-top:2px dashed red;

}
实际效果：

Answer 1

因为p元素的上下margin有一定的默认值，并且相邻元素和父子元素的上下margin会有合并特性。
具体请看：https://www.w3school.com.cn/css/css_margin_collapsing.asp
也就是说，父子元素之间没有内边距或边框把外边距分隔开，它们的上或下外边距会发生合并。
这样p元素的上下margin就合并到.lne的margin: 40px;中，而不可见了，
当你设置.lne的border就把父子元素间的外边距分隔开了。p元素的上下margin就单独呈现出来了。

你把p 的margin 设置为 0px 即可

.lne p{
    margin: 0px;
}