如何删除元素上的空格？答案

【问题标题】：How to remove a blank space on an element?如何删除元素上的空格？
【发布时间】：2015-12-07 05:02:25
【问题描述】：

我有一个h2 tag，但正如您在图片中看到的那样，文本未与元素的左侧对齐。

是否可以删除此空白或将文本粘贴到左侧？

以下是 CSS 属性：

h2 {
   font-size: 5.2em;
   font-family: UniSans;
   word-spacing: 1px;
}

:** 这是一个fiddle 我的问题。如果有顶部空白的解决方案，那就太好了。

【问题讨论】：

您的容器上可能有一个填充，或者您的 h2 上有一个边距。分享一个jsfiddle 会更容易看到问题
@thomash 您在选择文本时说的是空格吗？
图片代表了 chrome 控制台上的悬停，但问题似乎也发生在选择上。事实是我的元素没有正确对齐，因为这个空白。
这实际上是一种字体行为。如果您使用其他字体系列，您会看到不同的结果。
@KheemaPandey 你是对的，使用基本字体，文本正确对齐！

标签： css alignment text-alignment

【解决方案1】：

我相信这是无衬线字体的标准行为。字形周围有额外的“空间”用于升序/降序/衬线 AFAIK。

Codepen.io example

HTML

<h1>Decent Test</h1>

<h1 class="serif" >Decent Test</h1>

CSS

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 100px;
  font-family:sans-serif;
  word-spacing: 1px;
  padding:0;
  margin:0;
  background: pink;
  margin: 50px;
}

h1.serif {
  font-family: serif;  
}

【讨论】：

其实空白来自我的字体：/

【解决方案2】：

您需要将margin:0 添加到您的body 和您的h2

例如：http://jsfiddle.net/LB2N5/3/

【讨论】：

如果我将字体大小更改为 5em，边框和文本之间会有一个空白。我不想：/
这是字母的大小，除了相对定位外，你不能做太多，但这取决于字体大小，所以你必须添加position:relative和left:-5px示例或任何对您有益的价值。

【解决方案3】：

如下所示更新您的 CSS。希望它能解决问题。

body, html{margin:0; padding:0} 
h2 {
font-size: 5.2em;
font-family: UniSans;
word-spacing: 1px;
margin:0px;
padding:0px;
}

DEMO

【讨论】：

更新了我的答案。一探究竟。你错过了在 body 上设置padding:0; margin:0;。
和@singe31 一样的问题。如果我添加边框，文本将不会粘在它上面。
@SureshPonnukalai 它基本上是与字体相关的问题。通过选择其他字体系列 OP 可能会获得更大的空间或可以减少空间
同意@Kheema Pandey

【解决方案4】：

只需尝试使元素的边距为负值，例如使用 -2px，您可以根据自己的情况进行调整。

【讨论】：