你在span里面加个display：block

div{

    width:200px;

    height:40px;

    line-height:40px;

    text-align:center;

    border:5px solid green;

}

我给它设了个宽高。

还有jQuery的方法有一个链式的写法，你直接可以写成$(".red").wrapInner("<i></i>").wrap("<div></div>");

这是因为margin是盒子与盒子的间隙，a里面有b，margin是a与b的间距。这样a的height能被撑开，而padding，是在b里面自自己撑开。而不会改变a的高度，所以会出现这个情况。

这是什么原因呢？能解释一下不？

span
{
    color: white;
}

把padding: 8px;去掉就好。或者改成margin: 8px;