为什么盒子会像这样（填充/边框/边距）出来？答案

【问题标题】：Why does the box come out like this (padding/border/margin)?为什么盒子会像这样（填充/边框/边距）出来？
【发布时间】：2015-09-02 12:02:45
【问题描述】：

所以这是我学习 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;
}

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

【问题讨论】：

标签： html css border margin padding

【解决方案1】：

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

切换到display: block（CSS 中的code { display: block }）或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>

【讨论】：

fancy a chat?

【解决方案2】：

将display:block; 添加到您的代码css。还要修正这一行：

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

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

【讨论】：