Question

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

enter image description here

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

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

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

＆＃13;

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; }

＆＃13;

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

＆＃13;

Answer 2

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

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

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

为什么盒子会这样（填充/边框/边距）？

2 个答案: