为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我设置了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://img1.sycdn.imooc.com//5afa7946000162e604140203.jpg

正在回答

4 回答

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

/*width:100px;

    height:100px;*/


3 回复 有任何疑惑可以回复我~
#1

稽小寞 提问者

非常感谢!
2018-05-15 回复 有任何疑惑可以回复我~

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

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

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

1 回复 有任何疑惑可以回复我~
  1. 容器居中(box1):box1先绝对定位;left(或是right):50%;margin-left(right):-50xp(就是你容器的宽度的一半);

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

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

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信