您现在的位置是：网站首页> 编程资料编程资料

浅谈css阻断合并及其他影响正确理解CSS中的margin合并的用法css(html)背景图优化合并技巧详解CSS(html)背景图优化合并深入探讨谈谈CSS的边距合并之我的理解CSS的样式合并与模块化提高代码执行效率CSS外边距合并代码什么是CSS Sprites（图片合并）技术图文介绍CSS Sprites图片合并代码多个css、js文件自动合并、压缩在线工具css盒子模型 css margin 外边框合并

2021-09-04 977人已围观

简介这篇文章主要介绍了浅谈css阻断合并及其他影响的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

margin 的不正交

margin实用时会产生合并的现象

以下属性会阻断 margin 合并

border

display: table

display: flex

以上内容为结果详解在下方

阻断合并【详解】

 /* CSS */ .box{ border:1px solid red; height: 100px; margin: 10px; /* 注意：这里是10像素哦！ */ }

浏览器中是这个样的：

按理数 margin 应该是 div 上下之间的间距应该为 20px

解决办法 1、

浏览器中是这个样的：

其他影响

display 会影响 ul li 的小圆点

position：absolute 会影响 display：inline

position：fixed 会影响 transform

float 会影响 inline

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。