文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS问题与span

问CSS问题与span
EN

Stack Overflow用户

提问于 2014-12-24 22:37:13

回答 3查看 124关注 0票数 0

我试图重新创建一个标志与纯文本和CSS没有图像，我有问题，我不能得到填充到0周围的文字，使顶部和底部的文本只有2-5 5px。

另外，是否有可能让它们一个放在另一个上面，而不是有大标题的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>

谢谢

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-12-24 22:47:57

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

票数 3

Stack Overflow用户

发布于 2014-12-24 22:49:26

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

票数 0

Stack Overflow用户

发布于 2014-12-24 23:07:51

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

对于第二部分，您应该在<br />标记之间添加<span>标记。

小提琴或预览：

/* 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;
}

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27642746

复制

相似问题

问CSS问题与span
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS问题与spanEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS问题与span
EN