关于内层标签margin-top无效的问题

最新推荐文章于 2021-08-17 22:42:06 发布

双椒打卤面

最新推荐文章于 2021-08-17 22:42:06 发布

阅读量758

点赞数 2

分类专栏：学习中遇到的坑文章标签：标签布局

本文链接：https://blog.csdn.net/hidprovider/article/details/74164481

版权

学习中遇到的坑专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近在页面布局的时候遇到了这么一个问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title></title>
  <style type="text/css">
    header{
      width: 940px;
      height: 80px;
      background-color: #000;
      margin: 30px auto;
    }
    header #logo_lg{
      width: 150px;
      height: 30px;
      background-color: green;
      text-align: center;
      margin-left: 27px;
      margin-top: 27px;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">
      <div href="#" id="logo_lg">我是内层</div>
    </div>
  </header>
</body>
</html>

如下图，设置了margin-top,但是确没有生效，很是困扰。

这里写图片描述
一般块元素不受控制，我都默认是浮动的影响，但在这里我没有浮动。

为了解决这个问题，我将其改为定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title></title>
  <style type="text/css">
    header{
      width: 940px;
      height: 80px;
      background-color: #000;
      margin: 30px auto;
      position: relative;
    }
    header #logo_lg{
      width: 150px;
      height: 30px;
      background-color: green;
      text-align: center;
      position: absolute;
      top: 27px;
      left: 27px;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">
      <div href="#" id="logo_lg">我是内层</div>
    </div>
  </header>
</body>
</html>

问题就迎刃而解了
这里写图片描述
但是这个方式虽然达到了我的目的，但我依然无法理解为何margin-top不起作用。希望将来能找出这个问题的原因，回来将其写上。

相应地办法还可以给其父元素设置padding：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title></title>
  <style type="text/css">
    header{
      width: 913px;
      height: 53px;
      background-color: #000;
      margin: 30px auto;
      padding-top: 27px;
      padding-left: 27px;
    }
    header #logo_lg{
      width: 150px;
      height: 30px;
      background-color: green;
      text-align: center;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">
      <div href="#" id="logo_lg">我是内层</div>
    </div>
  </header>
</body>
</html>