HTML中使用CSS的不同元素的文本间距

刚刚开始使用CSS，我目前正试图复制基于JPEG的网站和给出网站的HTML代码。当涉及到页面的标题时，我遇到了问题，无法弄清楚它是如何工作的。HTML中使用CSS的不同元素的文本间距

的HTML代码的提取物是：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" href="style.css"> 
     <title> 
     </title> 
    </head> 
    <body> 
     <header id="overskrift"> 
      <h1>Informatikeren</h1> 
      <br> 
      Din største kilde til nyheter som allerede er skrevet på online.ntnu.no 
     </header>

而CSS我目前拥有的是：

#overskrift { 
    background-color: black; 
    color: white; 
    text-align: center; 
    height: 100px; 
    display: block; 
}

用我的CSS它目前看起来是这样的： Using my CSS

这它是如何看起来的：The finished result

字体布局不重要，对于挪威语中的文字感到遗憾。

已经尝试使用几个不同的线高度等，但这似乎使情况变得更糟。

任何人都知道如何在CSS中正确编码它？改变HTML不是和可选的。

谢谢！

问候，

来源

2015-09-25 Pontius

你的HTML不应该包含<br>。除此之外，您还想删除一些CSS并为边距和填充添加全局重置。

注意：对于下面的示例，由于您说过更改HTML不是一个选项，我已将<br>放入，并且正在使用CSS否定它。对于这种UI，您的HTML也不应包含<br>。

* { margin:0; padding:0 } 
 

 
#overskrift { 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
br { 
 
    display: none; 
 
}

<header id="overskrift"> 
 
    <h1>Informatikeren</h1> 
 
    <br> 
 
    Din største kilde til nyheter som allerede er skrevet på online.ntnu.no 
 
</header>

来源

2015-09-25 16:15:33 Zaqx

也许使用'#overskrift * {margin：0; padding：0}'以避免与页面上的任何其他元素相混淆（尽管'* {margin：0; padding：0}'是主要css文件开始处的一个好主意） – gaynorvader

解决了这个问题。谢谢！ – Pontius

@gaynorvader'* {margin：0; padding：0}'在CSS中是一般的规则，你可以写。这与'混淆'的唯一的事情是浏览器的基础样式表（因浏览器而异）。任何编写CSS的开发人员都将完全不受影响。 – Zaqx

您需要的款式直接申请H1元素。例如：

#overskrift h1 { 
    font-family: Arial,sans-serif; 
    font-size: 20px; 
}

您也可以声明“line-height”和“letter-spacing”属性以进一步设置样式以匹配文本。

来源

2015-09-25 16:22:38 Matthew3k

HTML中使用CSS的不同元素的文本间距

回答

相关问题