html - 跨度的 CSS 问题

Question

我正在尝试用纯文本和 CSS 重新创建一个没有图像的 Logo ，我遇到的问题是我似乎无法将文本周围的填充设置为 0，以便顶部和底部文本仅相隔 2-5 像素。

也可以将它们一个放在另一个之上，但不能有大标题 CSS

display:block

而不只是环绕文本。

jSFiddle: http://jsfiddle.net/theStudent/ag60a6hs/

CSS:

/* FONT IMPORT */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);

.logo_large_txt{
  color: #2faed9;
  margin:0 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 36px;
  background-color: #000;
  white-space: nowrap;
  display: block;
}

.logo_small_txt{
  color: #c2c2c2;
  padding: 0;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  background-color: #000;
  white-space: nowrap;
}

HTML:

<div>
    <span class="logo_large_txt">BIG TITLE</span>
    <span class="logo_small_txt">SMALL CAPS</span>
</div>

谢谢

Answer 1

这不是填充问题，而是行高问题。在相关元素(其中包含文本的元素)上设置 line-height: 1em; 并查看元素的高度现在如何等于文本的大小。