让div margin属性消失_为什么div里面打一个字之后就会有高度了呢？

why? 为啥我要写这个？

有一说一，挺好奇的，对于这种最最基础的问题，我觉得应该要有最最朴实准确的答案。

是文字本身撑开的？试验才是检验真理的唯一标准。

图1

图1当中的代码如下所示

<!DOCTYPE html>

很简单的控制变量，我们能看到肯定不是文字本身的大小撑起来div

再做个试验

图2

图二当中的代码如下所示

<!DOCTYPE html>
<html><head> <meta charset="utf-8">
</head>
<style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;}
</style><body><div class="text1">测试1是高度撑开了div吗？</div><div class="text2">测试2 那到底是什么撑开的div呢？ </div>
</body></html>

虽然没有文字，但是div依旧不是空的，而且我们并没设置height,那么可以确定是line-height撑起了整个的高度

在css中能撑起来元素高度的由两个属性组成 line-height height

line-height?

what？这是啥？

line-height是设置行高的的属性，本文不会完整的科普line-height，只会挑几个比较重要的点来分享。

line-height可以继承吗？

会，但是只是在当前元素没有line-height属性时才会继承父元素的

line-height设置大小的时候是相对于与谁设置的大小呢？

line-height 百分数是基于当前字体尺寸的百分比行间距，换句话来说，如果此时font-size为0，会有下面的结果

文字看不见
此时line-height如果设置为1，那么计算得到的line-height也是0，就所有的都看不到咯。能看到的只有border的一条线。

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中是真的吗？

是真的，但是描述不准确，准确的描述是““把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”

简单来说在想要在div或者p居中的时候，只需要把line-height设置成你想要的高度就ok了，不需要设置height

举个栗子

图3

可以看图3当中的测试3

下面是对应的代码

<!DOCTYPE html>
<html><head> <meta charset="utf-8">
</head>
<style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;}.text3 {margin-top: 100px;border: 1px solid blue;line-height: 120px;}
</style><body><div class="text1">测试1是高度撑开了div吗？</div><div class="text2">测试2 那到底是什么撑开的div呢？ </div><div class="text3">测试3 这个是一个居中而且没有height的测试，能成功吗？ </div>
</body></html>

可以明显的注意到class=text3的已经明显居中了，但是实际上并没有设置height

注意：这个是单行元素能这样玩，如果是多个段落不能这样玩，会出大事情.

那多行而且是段落怎么办呢？

<!DOCTYPE html>
<html><head> <meta charset="utf-8">
</head>
<style>.text1 {border: 1px solid red;font-size: 20px;line-height: 0;}.text2 {margin-top: 100px;border: 1px solid blue;font-size: 0;line-height: 20px;}.text3 {margin-top: 100px;border: 1px solid blue;line-height: 120px;}.text4 {margin-top: 100px;border: 1px solid blue;line-height: 150px;height: 150px;display: table;}.text41 {display: table-cell;vertical-align: middle;}
</style><body><div class="text1">测试1是高度撑开了div吗？</div><div class="text2">测试2 那到底是什么撑开的div呢？ </div><div class="text3">测试3 这个是一个居中而且没有height的测试，能成功吗？ </div><div class="text4"><div class="text41"><p class="textp1">测试4 这个是一个居中而且没有height的测试，能成功吗？11</p><p class="textp1">测试4 这个是一个居中而且没有height的测试，能成功吗？22</p></div></div>
</body></html>

比较常见的方案两种：

1.外部包一个table，使用table布局，里面使用table-cell+vertical-align:middle，虽然丑，但是确实有效.

2. flex (不谈了，不懂得可以去查一下)

其他的方法或多或少的有一些小问题，如果有新的方法，欢迎补充。

ps:line-height的一些需要注意注意的点

line-height可以设置百分比，也可以设置具体的大小
一般在试验当中，line-height设置为文字大小的1.4倍，整体看起来会比较合适
虽然ine-height可以使用任何的css的单位，但是最佳实践是使用数字而不带单位的行高,主要是继承问题，可能会影响到子元素的布局
line-height仅对内联元素有效，将inline-block或非内联的其他任何元素时效果仅仅作用于inline的后代元素