cosine - 前端人の日常频道#书摘 #css #前端 《CSS 世界》margin无效情形解析 「因为 margin 属性的诸多特异性，所以，我们在实际开发的时候，经常会遇到设置的margin无效的情形，这里我罗列一下，希望大家遇到类似的问题知道原因以及如何对症下药。」 1. display 计算值为 inline 的非替换元素的垂直 margin 是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding是有明显区别的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。…
#书摘 #css #前端
《CSS 世界》深入内联元素 —— vertical-align
1. 说到这里，我就忍不住多说两句。很多即使工作很多年的前端开发人员，也可能不知道 vertical-align的属性值支持数值，更不知道支持负值，这着实让我很意外。如果实用性差那还好理解，关键是vertical-align的数值属性值在实际开发的时候实用性非常强。一是其兼容性非常好，二是其可以精确控制内联元素的垂直对齐位置。http://demo.cssworld.cn/5/3-3.php
2. vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。换句话说，vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table或table-cell的元素上，而浮动和绝对定位会让元素块状化，
3. 填坑来了：「在4.3.5节最后提到了一个“内联特性导致的margin无效”的案例，代码如下：
其实这就是为什么很多重置css会把图片重置为块级元素的原因，比如tailwind
《CSS 世界》深入内联元素 —— vertical-align
1. 说到这里，我就忍不住多说两句。很多即使工作很多年的前端开发人员，也可能不知道 vertical-align的属性值支持数值，更不知道支持负值，这着实让我很意外。如果实用性差那还好理解，关键是vertical-align的数值属性值在实际开发的时候实用性非常强。一是其兼容性非常好，二是其可以精确控制内联元素的垂直对齐位置。http://demo.cssworld.cn/5/3-3.php
2. vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。换句话说，vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table或table-cell的元素上，而浮动和绝对定位会让元素块状化，
3. 填坑来了：「在4.3.5节最后提到了一个“内联特性导致的margin无效”的案例，代码如下：
<div class="box">
<img src="mm1.jpg">
</div>
.box > img {
height: 96px;
margin-top: -200px;
}
其实这就是为什么很多重置css会把图片重置为块级元素的原因，比如tailwind
