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

padding不懂

#box1{
width:100px;
height:100px;
padding:10px;
border:1px solid red;
}

为什么这里设置了上下左右填充为10px了，可是盒子里面的元素“盒子1”并没有居中呢，既然上下左右padding都是10px,那么上下左右的border边框到“盒子1”上下左右的距离都应该是10px才对啊

科里昂

2017-08-01

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

关注问题我要回答

1052

操作

收起

5 回答

乏心回答被采纳 +2 积分
2017-08-03

其实就是上右下左的内边距，你仔细看上和左都距离边框10px,右和下其实也有10px的内边距，但是因为右边和下边本身距离边框很远，所以你看不出右和下的距离

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

收起回答

科里昂提问者

本身距离边框很远是什么意思，不是设置成固定的10px了吗

2017-08-03 回复有任何疑惑可以回复我~

乏心回复科里昂提问者

比如你的边框宽高都100px,但是如果你让文本居中的话，文本的上下左右内边距都会成50，这个明白吗？左右=50+50=100，上下=50+50=100。而你设置的10px内边距，左右和上下加起来都=20px,根本达不到边框的宽高

2017-08-03 回复有任何疑惑可以回复我~

乏心回复科里昂提问者

文本在边框里默认在左上角对齐的，因为左上原本是没有内边距的，所以你设置10px后，左上隔开了10px,但是右下原本就有很宽的内边距，你设置的10px内边距被原本的边距包涵在里面，你看不到

2017-08-03 回复有任何疑惑可以回复我~

查看2条回复

慕粉3368879
2017-09-24

懂了，其实就是右下边距都被盒子本身的宽和高包含了，看不到而已。

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

收起回答

慕仔3497884
2017-09-12

因为内容区并不是指盒子1这三个字，而是一个放文字或图片的区域，你多添加些文字就明白了。

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

收起回答

乏心
2017-08-03

要居中的话，就你这个边框10px内边距肯定居中不了的。因为你边框太大,所以应该padding：50%；这样应该能居中。或者text-align:center;(文本居中)，再设置line-hight: ;(行高，比如边框高100px,行高就设置100px),这样也能居中

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

收起回答

慕工程1154506

为什么输入了padding:50%;边框会变大很多？

2017-08-19 回复有任何疑惑可以回复我~

乏心回复慕工程1154506

width,和height 没变吗？宽高没变的话，就是你边框里面的元素太了，元素的宽高大于边框宽高的一半了，那么设置padding:50%后会把边框撑大

2017-08-20 回复有任何疑惑可以回复我~

乏心
2017-08-01

padding是内边距，也就是盒子1到红色上边框的距离

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

收起回答

科里昂提问者

padding:10px 10px 10px 10px代表上下左右内边距都是10px ，或者简写成padding:10px 怎么会是上边距呢

2017-08-01 回复有任何疑惑可以回复我~

0/150

提交

取消

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

参与学习 1225806 人
解答问题 18234 个

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

进入课程

本课相似问答

3 回答padding

5 回答padding

2 回答padding

4 回答padding

搜索更多本课相关问答

padding不懂

我要回答关注问题

热搜

最近搜索清空

padding不懂

5 回答

本课相似问答

padding不懂