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

为什么盒子1不在红框中间

<!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>

按照这个代码写,四面填充相同为什么  “盒子一” 这几个字不在红框正中间?


正在回答

5 回答

因为这里面设置的width以及height是内容的边界,以这个例子来说,盒子这俩个字的外面是有一个100x100px的无形边界的,所以你只写盒子这俩个字只能看出来它是在这个无形边界的左上角,在多写几个字就会发现居中了

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

按照你这个写法,文本“盒子1”是内联元素,内联元素是在行内从左到右排布,“盒子1”的宽度并没有达到100-20 = 80px,要想让“盒子1”居中显示,加text-align:center;

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

 <!DOCTYPE HTML>
   <html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
       <title>填充</title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;

           }
           #box1{
               width:100px;
               height:100px;
               padding:10px;
               border:1px solid red;
               display: block;
               position: relative;
           }
           p{

               width: 40px;
               height: 40px;
               border: 1px solid red;
               position: absolute;
               top: 30px;
               left:30px;

           }
       </style>
   </head>
<body>
<div id="box1"><p>盒子1</p></div>
</body>
</html>
</head>
<body>

</body>

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

盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一拷贝进去

多打几个字看看效果:)

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

laoduDYM 提问者

多打几个字出红框了是为什么,还有打数字不换行是怎么回事
2016-03-02 回复 有任何疑惑可以回复我~

因为你设置的是盒子模型,没有对立面的文本进行设置

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

举报

0/150
提交
取消

为什么盒子1不在红框中间

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