                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

添加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

源自：初识HTML(5)+CSS(3)-升级版 12-12

关注问题我要回答

1800

操作

收起

3 回答

六月时光
2015-08-04

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

0 回复有任何疑惑可以回复我~

#1

慕斯卡9626126 提问者

非常感谢！

2015-08-04 回复有任何疑惑可以回复我~

六月时光
2015-08-04

下面有说明

0 回复有任何疑惑可以回复我~

温暖的骨头
2015-08-04

百度一下，你就知道

网页中的盒子模型；我们常常要控制盒子模型的宽度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;

0 回复有任何疑惑可以回复我~

#1

慕斯卡9626126 提问者

我知道你说的这些，但是我前面不是已经设置了#box1{ width:100px; height:100px; padding:10px; border:1px solid red; } 这里的padding不是应该在width，height范围内吗

2015-08-04 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225293 人
解答问题 18230 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

5 回答为什么加了padding后div变大了

5 回答padding:10px;这是什么？

2 回答div{ width:200px; padding:20px; border:1px solid red; margin:10px; }

1 回答padding不是区分上右下左的么？为啥padding:10px 20px; 就设置为上下填充10px，左右为20px？

3 回答设置padding大小为什么边框跟着变大

搜索更多本课相关问答

添加padding：10px;变大了？

我要回答关注问题

意见反馈帮助中心 APP下载