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

盒模型，填充

<!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 10px 10px 10px;

    border:1px solid red;

}

</style>

</head>

<body>

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

</body>

</html>

padding是元元素内容与边框的距离，为什么我设置了右边和下边是10px距离还是那么大

提问者：慕田峪9304305 2018-04-05 15:34

个回答

  • Turtle_Man
    2018-04-15 17:57:13

    我是这么理解的，你的weight和height设置的是元素内容的宽，你可以假想创建了一个100*100的文本框在里面输入文字盒子1，这时候盒子1是左对齐的，显然一个100*100的文本框里左对齐会在右下方留下大量的空白。padding设置的是元素内容与边框之间的距离，在你的元素内容框中，文字本来就在左上方，无论你怎么添加padding或者修改都不能达到文字居中的效果，但是实际上边框与你创建的元素内容框之间的距离上下左右都已经是10了。我采用了两种方法来验证，第一种是设置文字居中，然后来观察文本框的位置，在#box1中添加了代码


      text-align:center; 设置水平居中，

      line-height:100px;设置垂直居中

    在其他参数不变的情况下我得到了如下的结果

    https://img1.mukewang.com/5ad31fc10001db5a06550547.jpg

    之后我删除了添加的居中语句，还原到原始的练习状态，并在chrome中打开文件，查看了该文件的盒模型，效果如下

    https://img4.mukewang.com/5ad320fd00012a1d12230578.jpg

    忽略乱码的情况，左边淡蓝色的部分显示了元素内容的长宽，明显可见是一个正方形，且与红色边框边距均匀，再看右侧的淡蓝色盒子模型，其中数子100*100与代码设置保持一致，与上面的结论一致。我已我觉得应该是上述原因，其实你已经设置好了，只是文本内容还是左置顶，没办法直观的看到。你可以自己按照上面的方法也试一下，如果有问题或者你发现我的解释不对的话也希望你可以指出，共同进步。谢谢


    5
  • 慕仔6509913
    2018-04-05 15:51:10

    跟字体有关吧

    0