为什么.right的背景颜色这么大？代码中已注释问题地点

源自：5-6 DOM包裹wrapInner()方法

为什么.right的背景颜色这么大？代码中已注释问题地点

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 130px;
        background-color:red;//问题地点
    }
    
    .left div,
    .right div {
        width: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    p {
        border: 1px solid red;
    }
    
    a {
        border: 1px solid blue;
    }
    </style>
</head>


<body>
    <h2>DOM包裹wrapInner()方法</h2>
    <div class="left">
        <div class="aaron1">点击,通过wrapInner方法给所有P元素增加内部父容器div</div>
        <div class="aaron2">点击,通过wrapInner的回调方法给每个a元素增加内部父容器div</div>
    </div>
    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>
    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>


    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //给所有p元素，增加内部包裹父容器div
       $('p').wrapInner('<div></div>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapInner接受一个回调函数
        //每一次遍历this都指向了合集中每一个a元素
        $('a').wrapInner(function() {
            return '<div></div>'
        })
    })
    </script>
</body>

</html>

提问者：enough2 2016-10-22 11:58

个回答

下小朋友_

2017-01-03 11:42:40

我觉得是增加的这个P元素的外边距把盒子撑开了，把P的margin设置为0，这样就不会撑开了。

0
明晰IT

2016-10-22 14:57:20

.right {
        width: 250px;
        height: 130px;
        background-color:red;//问题地点
    }
在这个代码中加一行距顶部10像素

0