html - 为什么我的 header 默认显示为 : block?

所以我一直在处理一个 HTML 文件，我刚刚制作了我的标题。但出于某种原因，每当我打开 HTML 文件时，没有元素会位于同一行，它的显示属性默认为 block 。这是我的代码:

HTML:

<!DOCTYPE html>
<html>
 <head> 
    <title> Squidward Tentacles</title> 
	<link type="text/css" rel="stylesheet" href="homepagecss.css">
 </head>
 <body>
  <div id="title">
    <h1> Your place for everything Squidward! </h1>
  </div>
  
  <div id="header"> 
    <p> Home </p> <p> Chat </p> <p> Software </p> <p> News </p>
  </div>
 </body>
</html>

CSS:

#title{
	font-family: Verdana;
	text-align: center;
}

#header{
	border: 5px solid #fc6703;
	background-color: #fc6703;
	font-size: 40px;
	font-family: Verdana;
	margin: auto;
	padding-left: 30px;
	padding-right: 30px;
}

这只是为了练习我的 HTML 和 CSS，因为我是初学者，所以请不要问我为什么要对 Squidward 这样做。无论如何，如果您能告诉我发生了什么以及我做错了什么，我们将不胜感激。

谢谢!

最佳答案

<div>和 <p>是 block 元素； HTML/CSS 规范说它们默认为 display: block .

行内元素包括<span>和 <a> .

您可以通过手动设置 display: 来覆盖任何元素在 CSS 中。

关于html - 为什么我的 header 默认显示为 : block?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33989424/