问答详情
源自:12-12 宰相肚里能撑船 - 使用padding为盒子设置内边距(填充)

添加padding:10px;变大了?

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>填充</title>

<style type="text/css">

#box1{

    width:100px;

    height:100px;

    padding:10px;

    border:1px solid red;

}

</style>

</head>

<body>

<div id="box1">盒子1</div>

</body>

</html>

按理说,盒子的高和宽不是已经被设置为固定值了吗?怎么还会变大


提问者:慕斯卡9626126 2015-08-04 11:47

个回答

  • 六月时光
    2015-08-04 14:36:47
    已采纳

    你还是没理解盒子模型,盒子模型的宽:包括margin+border+padding+width。看到width了没?这个width就是你设的那个with,你那个widht:100px设置的不是整个盒子的宽度,而已内容的宽度,也就是上图青色那部分的宽度。只是你没设padding,margin所以你整个盒子的宽度是102px的,因为要加上边框的宽度。你设的width不是盒子的宽高,而是展现内容也就是上图那青色部分的宽高。紫色那部分是内填充的部分,黄色那个是margin的部分,这样加起来才是盒子模型

  • 六月时光
    2015-08-04 14:32:48

    http://img.mukewang.com/55c05c7e0001f70e03440163.jpg下面有说明

  • 温暖的骨头
    2015-08-04 12:02:22

    百度一下,你就知道


    网页中的盒子模型;我们常常要控制盒子模型的宽度width:   

    w3c中的盒子模型的宽:包括margin+border+padding+width;

        width:margin*2+border*2+padding*2+width;

        height:margin*2+border*2+padding*2+height;

    iE中的盒子模型的width:也包括margin+border+padding+width;