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

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 (不谈了，不懂得可以去查一下)

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