                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

<!DOCTYPE HTML>

<html>

<head>

#box1{

width:100px;

height:100px;

padding:10px;

border:1px solid red;

}

</style>

</head>

<body>

</body>

</html>

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

荷犸

2016-03-12

源自：初识HTML(5)+CSS(3)-升级版 12-12

关注问题我要回答

1515

操作

收起

4 回答

wzw218661
2016-03-12

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

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

收起回答

rantiny

超过盒子的高度也会出去的

2016-03-13 回复有任何疑惑可以回复我~

wzw218661
2016-03-12

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

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

收起回答

荷犸提问者

但是有padding啊，这是性质的作用不是盒子内容的内边距吗？有边距为什么内容还是会跑到外面去的呢？这不是很奇怪吗？

2016-03-15 回复有任何疑惑可以回复我~

julin1991
2016-03-12

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