解决嵌套块级元素垂直外边距的塌陷

问题引入

此时，要实现的内容是在一个盒子里面在嵌套一个盒子并且距离外层盒子的上边距为100px;

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>嵌套块级元素垂直外边距的塌陷</title><style type="text/css">.box{width: 300px;height: 300px;background-color: green;}.sbox{width: 100px;height: 100px;background-color: red;margin-top: 100px;}</style></head><body><div class="box"><div class="sbox"></div></div></body>
</html>

很明显：子盒子是相对于浏览器的margin-top:100px;而不是相对于父盒子。

此时，我们可能会想到通过绝对定位的方式来解决这个问题。这种想法也可以解决。但有其他三种方法可以解决。

解决方法一：可以为父元素定义边框
border: 1px solid green;
解决方法二：可以为父元素定义内边距
padding-top: 100px;(需要修改盒子的高度及子元素的外边距)
解决方法三：可以为父元素添加overflow属性
overflow: hidden;

七、外边距重叠问题（补充）（详细）

欢迎访问我的个人博客

解决嵌套块级元素垂直外边距的塌陷相关推荐

p元素嵌套块级元素失效问题
日志 <body><p><span>Lorem, ipsum dolor.</span><div><span>Lorem, ip ...
什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
html盒子距离上边距50px,Margin的垂直外边距问题
做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div ...
HTML中行内元素块级元素行内块元素
行内元素块级元素 1.当给行内元素定义一个具体的宽高时,是没有用的.只有对于块级元素是有用的.除非在行内元素里面写上内容,那个内容有多大,那就会被撑开有多大例: 如果是块级元素 <style& ...
css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...
HTML 之块级元素、行内元素和行内块元素之间的嵌套规则
一.简介之前对元素之间的嵌套规则没有进行系统的梳理,一直以为各种元素之间可以随意进行嵌套,但在实际敲代码的过程中发现并不是这样,大部分标签之间是可以随意嵌套的,但也存在一些特殊规则,比如:p标签内不 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
html盒子模型图片居中,html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
Web行内和块级元素及表格应用
一.转义字符由<> 包裹的文本会当做标签去解析空格 &emsp: ? < .gt < > "我认为这些电影对我来说非常特别.这是令人难以置信的 ...

解决嵌套块级元素垂直外边距的塌陷

问题引入

解决嵌套块级元素垂直外边距的塌陷相关推荐

最新文章

热门文章