为什么盒子1不在红框中间-慕课网

首页课程实战体系课手记专栏慕课教程

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

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

laoduDYM

2016-03-01 21:29

<!DOCTYPE HTML>

<html>

<head>

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

}

</style>

</head>

<body>

</body>

</html>

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

写回答关注

5回答

慕慕1265030

2016-08-02 13:59:33

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

0 0
Shawn_hou

2016-03-01 21:45:27

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

0 0
qq_追风_12

2016-03-01 21:38:47

<!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
委屈的宝宝

2016-03-01 21:35:14

盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一盒子一拷贝进去
多打几个字看看效果：）

1 0

laoduD...

多打几个字出红框了是为什么，还有打数字不换行是怎么回事

2016-03-02 09:50:58

共 1 条回复 >
轨迹power

2016-03-01 21:34:58

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

0 0