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

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

问题是，我希望它出来的时候是一个蓝色的虚线框，但是它是作为两个混乱的框出来的。

来源

2015-06-17 Marked as Duplicate

默认情况下，<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>

来源

2015-06-17 10:34:20 Ana

[看中聊天？]（http://chat.stackoverflow.com/rooms/69317/css-shapes-and-designs） – jbutler483

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

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

下面是一个小提琴：https://jsfiddle.net/rdgdz07o/ 使用它进行测试的东西了。

来源

2015-06-17 10:25:16 puzzler

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

回答

相关问题