CSS高度


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内联元素从左到右依次排列, 会自动换行,这就是文档流

你可能感兴趣的:(CSS高度)