分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > CSS

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

时间：2018-07-02 22:46 作者：小郑搞码事来源：小郑搞码事阅读：957
扫一扫，手机访问

摘要：点击右上方红色按钮关注“小郑搞码事”，每天都可以学到知识，搞懂一个问题！有一个点，大家应该都知道，子元素在水平方向上margin值始终都是可以够隔离父元素的。然而子元素在垂直方向上默认无法隔离父元素。说到这，能有人有点蒙圈，看一个demo：上面这个例子中，能看出，父元素（背景是红色）并没有被子元

点击右上方红色按钮关注“小郑搞码事”，每天都可以学到知识，搞懂一个问题！

有一个点，大家应该都知道，子元素在水平方向上margin值始终都是可以够隔离父元素的。然而子元素在垂直方向上默认无法隔离父元素。说到这，能有人有点蒙圈，看一个demo：

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

上面这个例子中，能看出，父元素（背景是红色）并没有被子元素的margin值撑开，反而子元素的marign值和父元素的margin值产生的合并。这一切都是正常现象。

本文给大家提供少量方法来将子元素隔离父元素。

方法一：父元素是BFC元素

父元素：overflow:hidden

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

方法二：父元素拥有border

父元素：border：solid

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

方法三：父元素拥有padding

父元素：padding：20px 0

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

方法四：父元素是可置换元素

父元素：display：inline-block

在CSS布局中，如何让子元素在垂直方向上的margin隔离父元素

最后总结一下：

让子元素在垂直方向上的margin隔离父元素，可可以还有其余方法，但这应该是最常使用的几种方法。将需要角度来看，有时，隔离也许就是我们想要的。

全部评论(0)

上一篇：用React.js开发渐进式Web应使用程序的分步教程
下一篇：css实现发光的input输入框

最新发布的资讯信息
【系统环境|】Linux 安全审计工具 Auditd(2025-12-08 23:24)
【系统环境|】使用Supervisor守护PHP进程：告别手动重启，实现自动化运维(2025-12-08 23:24)
【系统环境|】golang高性能日志库zap的使用(2025-12-08 23:24)
【系统环境|】MySQL主从复制技术详解(2025-12-08 23:24)
【系统环境|】华为MagicBook锐龙版双系统折腾记六：matlab(2025-12-08 23:24)
【系统环境|】ArrayFire：C++高性能张量计算的极速引擎(2025-12-08 23:24)
【系统环境|】一文读懂回声消除（AEC）(2025-12-08 23:23)
【系统环境|】缺人！泰达这些企业招聘！抓紧！(2025-12-08 23:23)
【系统环境|】RS485 Modbus 超级简单轮询程序(2025-12-08 23:23)
【系统环境|】RS485接口≠Modbus协议！工业通信常见认知陷阱(2025-12-08 23:23)

动风网络

店铺

推荐商品

手机访问领取大礼包