前端css基础知识点之margin——页边距 - 代码天地

前端css基础知识点之margin——页边距

其他 2021-11-21 21:44:54 阅读次数: 0

前端css基础知识点之margin——页边距

margin塌陷

父子塌陷

当父亲没有设置padding、border、内容时，父子元素垂直方向的margin会重叠

以父子中较大的为准而不是相加

效果如下
在这里插入图片描述

解决办法

把儿子的margin转化为父亲的padding 注意盒子总高度变化
给父亲增加一个属性 overflow: hidden

兄弟塌陷

垂直方向上相遇的margin会发生塌陷，以较大的值为准

只设置一个方向即可

猜你喜欢

转载自blog.csdn.net/Sun_Raiser/article/details/118711825

前端css基础知识点之margin——页边距

前端css基础知识点之条件hack

前端css基础知识点之position——定位

【前端】HTML与CSS基础知识点总结

前端css基础知识点之PC端项目-规范

前端css基础知识点之sprite——雪碧（精灵）

前端css基础知识点之opacity——透明度

前端css基础知识点之after,before,overflow,vertical-align

前端css基础知识点之element——元素类型

前端css基础知识点笔记之background——背景

前端css基础知识点之box-model——盒子模型

前端css基础知识点之text&font——字体

前端css基础知识点之selector——选择器

margin,CSS边距重叠

css基础知识点

CSS必备基础知识点

CSS必备基础知识点

CSS基础知识点-01

WEB前端基础知识点

前端基础知识点(3)

前端基础知识点(2)

前端基础知识点总结

前端css基础知识点之BFC——块格式化上下文，清除浮动

flask之基础知识点

好程序员前端教程CSS基础知识点

前端css基础知识点float——浮动以及清除浮动带来的影响

前端基础知识之css

html 和 css 基础知识点（一）

002.css常用基础知识点

HTML和CSS的基础知识点二

今日推荐

TIOBE 5 月榜单：Fortran “复活”进入 Top 10

GCC 14.1 发布

面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」

开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了

中国码农的“35岁魔咒”

蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载

Arc Browser for Windows 1.0 正式 GA

90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！

周排行

Java自定义时间格式

同步整形电路

在开发中最最最常用的字符串的属性大集合

Linux 查看端口占用并杀掉

Java基础四：ArrayList

多线程之死锁就是这么简单

mysql 基础命令集

awk 命令详解

Centos6.3编译安装nginx+php步骤

OCR （Optical Character Recognition，光学字符识别）

每日归档

更多

2024-05-08(42)

2024-05-07(14)

2024-05-06(40)

2024-05-05(0)

2024-05-04(7)

2024-05-03(19)

2024-05-02(0)

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)