我正在创建一个网页(第一次),我正在尽可能多地遵循CSS规则和标签.但是,我遇到了空白问题.我已经强调了第一行文字,但现在第二行似乎已经在下面漂移了.有没有办法让它更舒服一点,我希望第二行文字恰好在上面一行之下.
body,td,th {
color: #000000;
}
body {
margin: 0;
padding: 0;
padding-top: 6px;
text-align: center;
background-color: #FFFFFF;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
.style3 {
font-size: 32pt;
color: #666666;
margin-left: 0px;
border-bottom: 3px double;
}
.style5 {
margin-left: 390px;
font-size: 32pt;
color: #CCCCCC;
}
-->
</style></head>
<div id="centered">
<body>
<p class="style3"> FIRST LINE OF TEXT</p>
<p class="style5">INDENTED SECOND LINE</p>
</body>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
p.style3, p.style5 {
margin-top: 2px;
margin-bottom: 2px;
}
Run Code Online (Sandbox Code Playgroud)
玩这两个值,直到你对结果满意为止:)
你需要调整line-height
.更具体地说,添加以下声明:
.style5 {
line-height: 0.72em;
}
Run Code Online (Sandbox Code Playgroud)
如果您只想要第一行.style5
贴合,则需要调整上边距.请改用此声明:
.style5 {
margin-top: -10px;
}
Run Code Online (Sandbox Code Playgroud)
看小提琴.
注意:您应始终使用W3C标记验证服务和使用W3C CSS验证服务的CSS验证您的标记.当你刚开始时它会对你有所帮助.