老湿,当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部分,不知道原因百思不得其解啊