CSS边框破损

Question

我正在编写包含标题和一些描述的通知。 并将其显示在表单旁边。

组成jQuery中的元素：

var $title = $('<span></span>').addClass('title').text($('#title').val());
var $description = $('<span></span>').addClass('description').text(plainText);
var $notification = $('<span></span>').append($title).append($description).addClass('notification');

CSS：

.notification{
    border: 1px solid red;
    margin: 10px;
}

理想情况下，我希望边框围绕标题和描述。 我在这里做错了什么？

小提琴

Answer 1

<span>是默认的嵌入式元素。 要强制其遵守内部内容的矩形尺寸，请使用display: inline-block;

.notification{
    border: 1px solid red;
    margin: 10px;
    display: inline-block;
}

演示： http ： //jsfiddle.net/7b3j2/20/

Answer 2

只需添加display：block; 通知公告

.notification{
    border: 1px solid red;
    margin: 10px;
    display: block;
}

或将通知包装更改为div而不是span

var $notification = $('<div></div>').append($title).append($description).addClass('notification');

演示： Jsfiddle