Question

我无法将一小块文本设置为完美地包含在其元素中。无论我做什么，在单词的前面和下面似乎都有空间。我可以通过改变线高来消除底部间隙，但这似乎是一个草率的解决方案，取决于浏览器是否决定显示arial或helvetica（我将字体类型简单地称为'sans serif'），因为这可能会搞砸我有任何完美的对齐方式。

CSS

    html, body {
        margin: 0;
        border: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: Sans-Serif;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        display: inline-block;
    }

    #title {
        font-size: 36px;
        font-weight: bold;
        background-color: red;
        display: inline-block;
    }

HTML

    <!DOCTYPE HTML>
    <html>
        <body>
            <div id="header">
                <ul id="title">
                    <li>
                        Test title
                    </li>
                </ul>
            </div>
        </body>
    </html>

目前正在发生这种情况：

Current Situation

这就是我想要发生的事情：

Desired Outcome

的jsfiddle：

http://jsfiddle.net/kyuLqed8/

Answer 1

在css us＆＃34; line-height＆＃34;对于文本元素。看这个

＆＃13;

html, body {
	margin: 0;
	border: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Sans-Serif;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li {
	display: inline-block;
}

#title {
    line-height: 25px;
	font-size: 36px;
	font-weight: bold;
	background-color: red;
	display: inline-block;
}

＆＃13;

<body>
	<div id="header">
		<ul id="title">
			<li>
				Test title
			</li>
		</ul>
	</div>
</body>

＆＃13;

文本前后的差距

1 个答案: