删除元素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值来查看更改。

Answer 2

只需保持上面提到的两个或类似的font-size相同，使用line-height并使用它，直到您满意。

演示：

Jsfiddle

或

Jsfiddle2

Answer 3

这是因为两个<p>包含不同的font-size。您可以使用line-height属性来修复它们。

在CSS中添加line-height。您可以在另一个p元素上使用32px字体大小。

.di_h_cn p{
    font-size:24px;
    border:dashed 1px black;
    line-height:38px; /* Add this line*/
}

这是一个DEmo。http://jsfiddle.net/kheema/TkfSx/13/