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/

Answer 4

您可以尝试将margin-bottom:0用于<p>。

Answer 5

我认为您要删除单元格内部文本顶部的边距。如果这是您想要的，请从height:100px

中删除.di_h_en{your-styles-here}

删除元素p中的空格

5 个答案: