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

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

qq_夏日青枫_0

2016-03-15 08:38

width:100px;

height:100px;   //宽高一样

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

写回答 关注

2回答

  • TurnAllthelight
    2016-03-15 08:55:54

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

    TurnAl... 回复qq_夏日青...

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

    2016-03-16 21:15:51

    共 2 条回复 >

  • 荒城驿
    2016-03-15 08:49:11

    如果你的内容宽度加上两个padding(20px)比你设置的容器的width(100px)还要小,那么你的padding-right就不是10px,而是width(100px)减去padding-left(10px)再减去内容的宽度,高度也是这个道理。

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

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

1225297 学习 · 18230 问题

查看课程

相似问题