为什么内容会溢出盒子外面？

源自：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">盒子1666666666666666666666666</div>

</body>

</html>

我的padding已经设置为什么我继续往盒子加内容的时候为什么会溢出到盒子外面去了呢？

提问者：荷犸 2016-03-12 14:49

个回答

wzw218661

2016-03-12 15:21:25

好像是中文就不会出去英文和数字会出去，你试试

1
wzw218661

2016-03-12 15:00:23

你那所谓的盒子并不是真正的盒子，是自己定义的一个内容的边框而已吧，你试试改变box1 border的宽度，“盒子”也会变大

0
julin1991

2016-03-12 15:00:06

<!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;
     display:inline;
    border:1px solid red;
}
div{padding:10px;}
</style>
</head>
<body>
<div id="box1">盒子1666666666666666666666666</div>
</body>
</html>

0
别着急

2016-03-12 14:56:45

盒子宽度不够，而<div>这是块状区域了</div>，块状元素要占用一行才换行的

1