DIV 中的高度是由什么决定的

默认div的高度是0，但是我们在div中放入文字，div的高度就有了。很多人会认为是文字大小font-size决定的。其实要知道这个问题；我们可以通过简单实例就知道了。div的高度实际是通过line-height决定的。

演示效果

图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

HTML代码片段

<div class="container"><!-- div 默认高度此时在页面不显示任何东西 --><div class="height0"></div><div class="height1">DIV行高决定测试1</div><div class="height2">DIV行高决定测试2</div>
</div>

CSS代码片段

<style type="text/css">
ul{margin:0px;padding:0px;
}
.container{margin:30px 0px;padding:100px}
.container
.container .height0,
.container .height1,
.container .height2 {margin:30px 0px;border:1px solid #FF5722;background: #eee;
}
.container .height0{/*默认div高度*/
}
.container .height1 {font-size: 16px;line-height: 0px;
}
.container .height2 { font-size: 0px;line-height:35px;
}
</style>

在div三段代码中；第一个默认高度为0，所以不可见。第二个行高为0，显示为一条2像素的线。第三个行高为35；虽然文字看不见，但是高度是依然存在；35px。

项目	Value
默认	0
line-height	0
line-height	35

综上可以得出结论；div的高度是由line-height决定的。

测试源代码下载加Q群：149663025，关注公众号；了解更多

DIV 中的高度是由什么决定的相关推荐

div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
dw怎么修改html框架的宽度,Dreamweaver （dw）cs6中div标签宽度和高度设置方法
很多用户给小编留言说dw cs6中div标签宽度和高度怎么设置?Dreamweaver cs6中div标签想要设置高度和宽度,该怎么设置呢?今天脚本之家小编就给大家带来Dreamweaver (dw) ...
js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...
div中的图像在图像下方有多余的空间
为什么在以下代码中div的高度大于img的高度? 图像下方有一个缝隙,但似乎不是填充/边距. 图像下方的间隙或多余空间是多少? #wrapper { border: 1px solid red; wi ...
div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <htmllang="en"> &l ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...

DIV 中的高度是由什么决定的

DIV 中的高度是由什么决定的

DIV 中的高度是由什么决定的

演示效果

HTML代码片段

CSS代码片段

DIV 中的高度是由什么决定的相关推荐

最新文章

热门文章