div里面有内联元素时的高度
当我们新建建一个font-size= 20px;的div时, div高度为28px
例图:
而当我们设置字体为另外一种, 例如Tahoma, div高度就变为24px了, 这时如果我们要设置确定的高度, 需要使用line-height: 30px.
查过资料后发现
设计师设计字体会有建议行高
字与字之间通过会通过基线对齐
因此我们知道了div的高度是由这个字的字体的建议的行高确定的, 与字有多大没关系. 换句话说, 如果div里面只有一个内联元素, 那么div的高度就是这个内联元素这一行的行高.
多行内联元素就是把每行行高加起来.
image.png
一个div里面还有div
父元素中div的高度是子元素的高度加padding加margin,.
div中如果父元素没有什么挡住margin,那么子元素的上下外边距(margin)会与父元素的合并.
解决方法:
给父元素加一个border-top, border-bottom或者加padding或者overflow: hidden;(不推荐)
又有内联元素又有块级元素
div的高度是由它内部文档流中元素的总和决定的
div内联元素从左到右依次排列, 会自动换行,这就是文档流
