删除元素p中的空格 [英] Remove the space in Element p

问题描述

首先，请参阅问题和演示

您可以看到甚至设置 margin：0px; 到元素，文本和

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

我知道这不是一个大问题，但是想要完美的看看，也想了解更多关于css和html。感谢您的关注。

解决方案

您可以使用 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：dotted 1px black;}。di_h_cn p {font-size：24px; border：broken 1px black;}  

 < div class = di_header> < div class =di_h_en>< p>我还在< / p>< / div> < div class =di_h_cn>< p>我是中文我是中文< / p>< / div>< / div>  
 

在这里，我把 line-height 稍小，减少边界的边界。使用 30px 值查看更改。

Fist of all, pls see this Question and the Demo

You can see even set the margin:0px; to the element, there's still a space between the text and the

element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?

I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.

解决方案

You can reduce the height's lines of paragraphs with the line-height property:

* {
    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>

Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.

这篇关于删除元素p中的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！