为什么盒子会这样出来（padding/border/margin）？

Question

所以这是我学习 HTML&CSS 的第一天，我目前遇到了问题。为什么这个块会这样出来（左边是我得到的，右边是我想要实现的）：

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Temporary</title>
<link rel="stylesheet" href="main2.css">
</head>
<body id="top">

<code id="boxone">Welcome! <br>Dashed border</div>

</body>
</html>

CSS:

code {
background: #5CC7FF;
font-family: "Comic Sans MS", cursive, sans-serif;
padding: 2px;
margin-top: 1px;
margin-left: 1px;
margin-bottom: 4px;
margin-right: 4px;
text-align: center;
}

#boxone {
border: 8px dashed #5CA8FF;
}

问题是我希望它显示为蓝色虚线框，但它显示为两个乱七八糟的框。

Answer 1

将 display:block; 添加到您的代码 css。还要修复此行：

<code id="boxone">Welcome! <br>Dashed border</div>      <= </code>

这是一个fiddle：https://jsfiddle.net/rdgdz07o/ 用它来测试东西。

Answer 2

默认情况下，<code> 元素的 display 为 inline（这将为由 <br> 分隔的每个部分生成一个元素框） .

切换到 display: block（code { display: block } 在您的 CSS）或 display: inline-block 将意味着只为您的 <code> 创建一个元素框。

code {
  display: block;
  background: #5CC7FF;
  font-family: "Comic Sans MS", cursive, sans-serif;
  padding: 2px;
  margin: 1px 4px 4px 1px;
  text-align: center;
}

#boxone {
  border: 8px dashed #5CA8FF;
}

code:nth-child(2) { display: inline-block; }

<code id="boxone">Welcome! <br>Dashed border</code>
<code id="boxone">Welcome! <br>Dashed border</code>

为什么盒子会这样出来（padding/border/margin）？

Why does the box come out like this (padding/border/margin)?

html

css

border

margin

padding