我正在尝试用纯文本和 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>
谢谢
最佳答案
这不是填充问题,而是行高问题。在相关元素(其中包含文本的元素)上设置 line-height: 1em;
并查看元素的高度现在如何等于文本的大小。
关于html - 跨度的 CSS 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27642746/