So this is my first day learning HTML&CSS and I'm currently having a problem. Why does this block come out like this (on left is what I get & on right is what I'm trying to achieve):
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;
}
The problem is that I want it to come out as a blue dashed box, but instead it comes out as two messed-up boxes.
By default,
<code>
elements have adisplay
ofinline
(which is going to generate an element box for every one of the parts separated by<br>
).Switching to
display: block
(code { display: block }
in your CSS) ordisplay: inline-block
will mean creating just one element box for your<code>
.