问答详情
源自：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;

    border:1px solid red;

}

</style>

</head>

<body>

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

</body>

</html>


提问者：慕后端5233451 2019-03-06 11:02

个回答

  • weixin_慕的地531652
    2019-05-18 08:25:41

    不居中是因为字体的高宽是有固定大小的，而达不 到的部分实际用空白取代了呢  可通过设置参数来实现 

    1. text-align;

    2. line-height; 

       通过浏览器的检查是可以查看空白部分的盒子模型的


    0
  • 小小铁头娃
    2019-05-07 20:56:18

    那是因为你已经设定盒子的尺寸是100×100。而后面padding：10px只能控制左填充距离10，上填充距离10。

    2
  • 哟西红豆泥
    2019-05-06 17:52:46

    并不是说设置了padding四个方向相同就居中的 你可以试试不设置padding看看它的初始状态 再分别改变四个方向 可以看到它是在初始状态下再改变距离的 可以自己动手试一下 

    0
  • 世界意志
    2019-03-06 23:32:45

    你要水平垂直都居中的话要加两行css代码

    1. text-align:center;

    2. line-height:100px;  //要和height属性设置的值相同


    1
  • 幕布斯5209223
    2019-03-06 11:08:08

    因为要设置test-align:center才能居中位置

    0