学习css3的第一天，做消息提示框练习的时候遇到了问题，因此记录下来。 在绘制三角形的时候，设置完border，并没有如我所愿的显示三角形。 （疑问：为什么内容区自带高度）！
div{ width: 200px; height: 50px; background-color: rgba(0, 200,10, 0.5); text-indent: 20px; margin: 50px 0 0 200px; } div::before{ content: ""; border:20px solid transparent; border-right: 80px solid aqua; }效果如下： 当我在博客看别人的写法的时候，我发现有一个案例写display:line-block，我测试了一下，原来：:before、：：after伪元素是内联元素，内联元素自带高度，并且高度和字体大小有关：
span{ border: 1px solid red; margin:21px 50px; }显示如下： 当我把字体设为21px的时候，高度变为29px了（字体大小并不等于设置的21px，并且自带间隔。参考：https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align）： 疑问：为什么margin-top没效果？ 具体结论参考：https://blog.csdn.net/qq_37621289/article/details/82859024， 具体解释还没找到！
总结： 问题一：为什么内容区自带高度？ 原因：因为内联元素自带高度，并且高度和字体高度有关。 解决方法：1、font-size = 0; 2、absolute定位、浮动隐式把元素改为inline-block; 3、直接用display：inline-block 问题二：为什么顶底的内外边距没效果？ 原因：未知； 结论：内联元素设置margin-top、margin-bottom无效，设置paddin-top、padding-bottom有视觉效果，但没功能效果，能遮挡其它元素不能挤开其它元素。
联想： 写到font-size=0，我想起用inline-block做九宫格的时候，font-size能解决内联/块元素换行空格问题。
#wrapper{ width: 170px; height: 170px; border: 1px solid black; margin-top: 200px; /* font-size: 0; */ } #wrapper .box{ width: 50px; height: 50px; border: 5px solid blue; display: inline-block; text-align: center; font-size: 12px; line-height: 50px; /* margin-right: -5px; margin-bottom: -5px; */ } #wrapper .box:hover{ border-color: red; }显示如下： 问题：为什么font-size = 0能解决内联/块元素换行产生的空格？ 原因：某教育html基础课里说内联/块元素具备文字特性（空格分隔）。 我能否理解为inline-block元素（格子）是外框div的文字？这样一来外框div设置font-size = 0就说得通了。
以上仅为个人学习的记录，或理解不够，如有错误欢迎指出。 参考：https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align 参考：https://blog.csdn.net/qq_37621289/article/details/82859024
