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

为什么我设置了padding：50px;而内容不是居中，边框不是正方形而是长方形？

<!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:50px;

    border:1px solid red;

}

</style>

</head>

<body>

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

</body>

</html>

https://img2.mukewang.com/5afa7946000162e604140203.jpg

提问者：稽小寞 2018-05-15 14:08

个回答

  • 慕婉清2379718
    2018-05-15 15:56:05
    已采纳

    padding是内容距离左边框50px，因为你的内容太短了，所以看不出来离右边框多远，你多输入几十个字，看看效果就知道了。你把宽度和高度注释了，所以不是正方形，你把注释去掉再试一试。

    /*width:100px;

        height:100px;*/


    3
  • 慕勒1955161
    2018-05-15 15:48:38

    padding是内容和边框的距离,和你文字没关系。

    1
  • 飞上云端_
    2018-05-15 14:58:00

    内容居中用align，盒子的形状用width和height来控制，padding是内容和边框的距离

    1
  • 莫失
    2018-05-15 14:49:52

    1. 容器居中（box1）：box1先绝对定位;left(或是right):50%;margin-left(right):-50xp(就是你容器的宽度的一半)；

    2. 或直接内容居中就行了（text-align: center;）

    0