时间戳

首页 > 解决方案 > 2 DIV 元素在没有应用任何边距的情况下不拥抱顶部

html - 2 DIV 元素在没有应用任何边距的情况下不拥抱顶部

问题描述

代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- Styling -->
    <style>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      white-space: nowrap;
    }

    html,
    body {
      font-family: Arial;
    }

    header,
    section,
    footer {
      margin: 0 1.5% 24px 1.5%;
    }

    .logo img,
    .logo {
      height: 120px;
    }

    header div {
      display: inline-block;
      text-align: left;
      padding-left: 180px;
      padding-right: 180px;
      height: 120px;
    }



    </style>
    <!-- Styling END -->
  </head>
  <body>

    <header>
      <div class="logo">
        <img src="https://www.nasa.gov/sites/default/files/thumbnails/image/nasa-logo-web-rgb.png" alt="">
      </div>


      <div class="Company-Details">
        <p style="Font-Weight: Bold; Font-Size: 20px;">Company Name</p>
        <p>Address 1</p>
        <p>Address 2</p>
        <p>Address 3</p>
      </div>

      <div class="Company-Contact">
        <p>Tel: 132 321</p>
        <p>Fax: 123 132</p>
        <p>Email: technical@gmail.com</p>
        <p>www: www.google.co.uk</p>
      </div>
    </header>

    <section>

    </section>

  </body>
</html>

问题：

为什么Div's下面截图中的 2 被放低了，而不是像图片一样抱住顶部？但是，相反，它应用了一些边距，即使如此 - 没有应用边距。

在此处输入图像描述

试过：

我认为添加这行代码是合理的header div {margin: 0;}。

那没有用。

我很困惑为什么 2 个 div（中间和右侧）没有拥抱顶部？

标签： htmlcss

解决方案

您正在使用 display: inline-block; 您还应该添加垂直对齐属性；代码：

header div {
    display: inline-block;
    vertical-align: top; // add this line
    text-align: left;
    padding-left: 180px;
    padding-right: 180px;
    height: 120px;
}

推荐阅读