内外边距问题(清除、合并、塌陷）

清除内外边距

简写：

*{padding: 0;margin: 0;
}

比较正式的话如下：

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p {padding: 0;margin: 0;}

注意：行内元素只有左右外边距，没有上下外边距，内边距，在低版本浏览器会有问题
所以尽量不给行内元素指定上下的内外边距就好

外边距合并

外边距合并，垂直的块级盒子以最大的外边距为准
所以尽量避免，只给一个盒子外边距即可

嵌套块元素垂直外边距的合并

以下为外边距塌陷合并问题

 .father {width: 300px;height: 300px;background-color: blue;margin-top: 100px            }.son {width: 200px;height: 200px;background-color: green;margin-top: 30px;}

解决方案
1.可以为父元素定义1像素的上边框或上内边框
2.可以为父元素添加overflow：hidden
法1

 .father {width: 300px;height: 300px;background-color: blue;margin-top: 100px;border: 1px solid red;  /* 解决外边距合并（塌陷）问题 */      }

法2

.father {width: 300px;height: 300px;background-color: blue;margin-top: 100px;padding: 1px;    /*解决外边距合并（塌陷）问题*/    }

法3

 .father {width: 300px;height: 300px;background-color: blue;margin-top: 100px;overflow: hidden;     /* 解决外边距合并（塌陷）问题   */      }

内外边距问题(清除、合并、塌陷）相关推荐

内边距和外边距，清除默认的内外边距
内边距(padding)--边框与内容之间的距离 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 p ...
清除内外边距(HTML、CSS)
清除内外边距(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset= ...
内外边距、浮动、布局相关
关于清除元素的内外边距: 1.行内元素只有左右边距.没有内外边距.内边距在ie6等低版本的浏览器中也会有问题.尽量不要给元素指定行内的内外边距: 2.外边距的合并使用margin定义块元素的垂直外边 ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
7.css内外边距设置
1.常用写法总结常用属性说明 margin 设置外边距 padding 设置内边距,注意:设置内边距会改变原有容器的大小 2.代码示例 <!DOCTYPE html> <html ...
28.html-盒子模型-内外边距
.内边距:边框与内容之间的距离 <!-- 盒模型内边距:padding padding-top:上内边距 padding-right:右内边距 p ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...

内外边距问题(清除、合并、塌陷）

清除内外边距

外边距合并

嵌套块元素垂直外边距的合并

内外边距问题(清除、合并、塌陷）相关推荐

最新文章

热门文章