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

为什么填充数值一样，而效果却不是想要的效果？？

width:100px;

height:100px; //宽高一样

padding:10px //按照解释，上右下左四边填充都一样，理论上到四边的距离应该一样，实际上效果却不是

qq_夏日青枫_0

2016-03-15

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

关注问题我要回答

763

操作

收起

2 回答

TurnAllthelight
2016-03-15

因为你所填充的规则是宽=左边界+左填充+内容宽度+右填充+有边框+右边界；高也是如此，所以要实际内容在中间就应该去掉所对应的内容像素长度就可以啦

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

收起回答

qq_夏日青枫_0 提问者

那如果想让实际内容在中间的话，就类似这节所讲的要去掉哪些内容才可以

2016-03-15 回复有任何疑惑可以回复我~

TurnAllthelight 回复 qq_夏日青枫_0 提问者

你想让实际内容中间。但是网页是有宽高距离的，但是你也得将那些空白距离算进去，将那空白一段距离加到实际内容前才可以将实际内容放到你想要的中间，因为这是一个盒子模式规则，所以你想要在中间，就得把那些上下左右的距离算好，比如你实际的内容宽为50px 高为80px 而这个盒子宽高都为100px 那你想放到中间就应该是宽=左边padding 20px+实际内容的宽50px+右边的padding25xp；高就是=上边top padding 10px+实际内容的80px+ bottom padding 10px 所以你才可以放到中间，而不是去掉那些内容，因为盒子有内边距和外边距，所以也要吧这些也考虑进去

2016-03-16 回复有任何疑惑可以回复我~