html - 删除元素 p 中的空格

Question

首先，请看这个Question和 Demo

你可以看到即使为元素设置了 margin:0px;，文本和

元素边框之间仍然有一个空格。当我将中文和英文文本放在一行时，这是一个问题，因为英文和中文的空间不一样。有人知道如何解决这个问题吗？

我知道这不是什么大问题，但是想让它看起来更完美，也想学习更多关于css和html的知识。感谢您的关注。

Answer 1

您可以使用 line-height 属性降低段落的高度:

* {
    margin:0px !important;
    padding:0px !important;
}

.di_header{
    display:table;
    width:100%;
}

.di_h_en{
    width:30%;
    height:100px;
    display:table-cell;
    vertical-align:bottom; 
    text-align:left;
    border:solid 1px red;
}

.di_h_cn{
    width:70%;
    display:table-cell;
    vertical-align: bottom;
    text-align:right;
    border:solid 1px red;
}


.di_h_en p{
    font-size:32px;
    line-height:30px;
    border:dashed 1px black;
}

.di_h_cn p{
	font-size:24px;
    border:dashed 1px black;
}

<div class="di_header">
    <div class="di_h_en"><p>I'm left</p></div>
    <div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>

在这里，我把 line-height 放小了一点，所以它减少了带边框的边距。使用 30px 值来查看变化。