Question

我正在尝试使用纯文本和CSS重新创建徽标没有图像，我遇到的问题似乎无法在文本周围填充为0，以便顶部和底部文本仅相隔2-5px。

也可以让它们一个在另一个之上但不是有BIG TITLE CSS

显示：块

而只是环绕文本。

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;，并查看元素的高度现在是如何等于文本的大小。

Answer 2

也许添加line-height可能会有所帮助，例如logo_large_txt的line-height:50%。

Answer 3

是的，这是line-height问题。您可以在div上将line-height设置为1或更小，然后查看结果。

第二部分您应在<br />代码之间添加<span>代码。

fiddle或预览：

＆＃13;

/* 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;
  white-space: nowrap;
}

.logo_small_txt{
  color: #c2c2c2;
  padding: 0;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
div.logo {
    line-height: 0.8;
    display: inline-block;
    background-color: #000;
}

＆＃13;

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

＆＃13;

跨度的CSS问题

3 个答案: