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

老湿,当padding的top和bottom值超过了元素的height时,文字会如何显示呢

.demo{
 width: 300px;
 height: 200px;
 padding: 300px;
 border: 5px solid blue;
 margin: 20px;
 background: #fee;
 box-sizing: border-box;
}
<div class="demo">
内边距区域padding area 用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部,通常有背景——颜色或图片(不透明图片盖住背景颜色). 它的大小为 padding-box  宽与 padding-box 高。
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
边框区域border area 是包含边框的区域,扩展了内边距区域。它位于边框边界内部,大小为 border-box  宽和 border-box 高。由 border-width 及简写属性 border控制。
外边距区域margin area用空白区域扩展边框区域,以分开相邻的元素。它的大小为  margin-box 的高宽
</div>

在这个例子中,文字会向下溢出content area部分到padding部分,不知道原因百思不得其解啊

正在回答

2 回答

padding会撑大盒模型

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

刚刚又看了一下,个人理解是层叠顺序的锅


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

举报

0/150
提交
取消

老湿,当padding的top和bottom值超过了元素的height时,文字会如何显示呢

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