margin 的不正交
margin实用时会产生合并的现象
以下属性会阻断 margin 合并
border
display: table
display: flex
以上内容为结果 详解在下方
阻断合并【详解】
/* CSS */ .box{ border:1px solid red; height: 100px; margin: 10px; /* 注意:这里是10像素哦! */ }
<!-- HTML --> <div class="box"></div> <div class="box"></div> <div class="box"></div>
浏览器中是这个样的:
按理数 margin 应该是 div 上下之间的间距应该为 20px
解决办法 1、
<!-- HTML --> <!-- css不变 --> <div class="box"></div> <div style="border: 1px solid blue"></div> <!-- 新加 --> <div class="box"></div> <div style="border: 0.1px solid blue"></div> <!-- 新加 --> <div class="box"></div> <div class="box"></div>
浏览器中是这个样的:
<!-- HTML --> <!-- css不变 --> <!-- HTML --> <div class="box"></div> <div style="display: table"></div> <div class="box"></div> <div style="display: flex"></div> <div class="box"></div> <div class="box"></div> <!-- display:block / inline 不会阻断合并 只有table flex 可以 -->
浏览器中是这个样的:
其他影响
display 会影响 ul li 的小圆点
position:absolute 会影响 display:inline
position:fixed 会影响 transform
float 会影响 inline
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
这句话起什么作用 ? 复制代码 代码如下: link rel="shortcut icon" href="/favi...
【内容】: 1.利用background-image 渐变样式 2.可以利用scale缩放 3.给伪元素设...
1、在HTML头部增加viewport标签。 在网站HTML文件的开头,增加viewport meta标签...
去年, 民工哥的新书 出版之后,就有不少读者经常来加我微信好友,一起探讨如何...
在 《Web 安全漏洞之 CSRF》 中我们了解到,CSRF 的本质实际上是利用了 Cookie ...
Redis 内部使用一个 RedisObject 对象来表示所有的 key 和 value,RedisObject ...
使用canvas实现黑客帝国数字雨 效果图: 代码: !DOCTYPE htmlhtml lang=enhead ...
XHTML是W3C推荐的一种标准,它定义了一种与XML兼容的HTML版本。XHTML文档是一个...
本文主要介绍了详解css3 flex弹性盒自动铺满写法,分享给大家,具体如下: style...
作者:Abhilash Kakumanu 译者:前端小智 来源:stackak 有梦想,有干货,微信搜...