为什么内容会溢出盒子外面？-慕课网

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

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

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

荷犸

2016-03-12 14:49

<!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已经设置为什么我继续往盒子加内容的时候为什么会溢出到盒子外面去了呢？

写回答关注

4回答

wzw218661

2016-03-12 15:21:25

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

1 1

rantin...

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

2016-03-13 16:14:05

共 1 条回复 >
wzw218661

2016-03-12 15:00:23

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

1 0

荷犸

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

2016-03-15 11:29:59

共 1 条回复 >
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>

1 0

荷犸

这是把块状元素转换了是吧，但是不是我想要的答案哦

2016-03-15 11:26:14

共 1 条回复 >
别着急

2016-03-12 14:56:45

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

0 1

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225297 学习 · 18230 问题

相似问题

盒子模型内容溢出

回答 3

内容太多会超出盒子？

回答 2

盒子中的内容怎么超出了外边框

回答 5

给一个盒子定了宽高,为什么里面的内容还是会超出框？

回答 5

关于盒模型内容底部溢出不解！

回答 8

打开慕课网App查看更多内容