Почему коробка выглядит так (padding/border/margin)?

Так что это мой первый день обучения HTML & CSS, и в настоящее время у меня проблема. Почему этот блок выходит так (слева, что я получаю & справа то, что я пытаюсь добиться):Почему коробка выглядит так (padding/border/margin)?

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

Почему коробка выглядит так (padding/border/margin)?

ответ

Смежные вопросы