CSS table 个单元格 div 上有 space

Question

我有以下 html 代码：

    .container {
        display: table;
        width: 100%;
        height: 100%;
      }
    
      .menu-container {
        width: 150px;
        height: 100%;
        background: #1b1b1b;
        color: #fff;
        display:table-cell;
      }
    
      .menu-container h1 {
        margin: 0px;
        width: 100%;
        padding: 5px 0px 5px 15px;
        background: #171717;
        font-weight: 600;
      }
    
      .main-container {
        width: auto;
        display:table-cell;
        box-shadow: -10px 0px 40px -10px #000000;
      }
    
    .container-header {
          width: 100%;
          background: red;
       }

<div class="container">
  <div class="menu-container">
    <h1>Browse</h1>
    <menu-container></menu-container>
  </div>
  <div class="main-container">
    <div>
      <div class="container-header">some text</div>
      random text
    </div>
  </div>
</div>

外观如下：

如您所见，在 "some text" 元素之前有一个 space。我不想要额外的 space 我希望元素从其容器的顶部开始。我尝试了一些技巧，例如 margin-top: -Xpx 但它没有用。我该如何解决这个问题？

Answer 1

这是你想要的吗？

只需在 container 上使用 display:flex。

.container {
  display: table;
  width: 100%;
  height: 100%;
  display:flex;
}

.menu-container {
  width: 150px;
  height: 100%;
  background: #1b1b1b;
  color: #fff;
  display: table-cell;
}

.menu-container h1 {
  margin: 0px;
  width: 100%;
  padding: 5px 0px 5px 15px;
  background: #171717;
  font-weight: 600;
}

.main-container {
  width: 100%;
  display: table-cell;
  box-shadow: -10px 0px 40px -10px #000000;
}

.container-header {
  width: 100%;
  background: red;
}

<div class="container">
  <div class="menu-container">
    <h1>Browse</h1>
    <menu-container></menu-container>
  </div>
  <div class="main-container">
    <div>
      <div class="container-header">some text</div>
      random text
    </div>
  </div>
</div>

Answer 2

请检查这个。

.container {
    display: table;
    width: 100%;
    height: 100%;
  }

  .menu-container {
    width: 20%;
    height: 100%;
    background: #171717;
    color: #fff;
    display: table-cell;
    float: left;
  }

  .menu-container h1 {
    margin: 0px;
    width: 100%;
    padding: 5px 0px 5px 15px;
    font-weight: 600;
  }

  .main-container {
    width: auto;
    display: table-cell;
    box-shadow: -10px 0px 40px -10px #000000;
    float: left;
    width: 80%;
  }

.container-header {
      width: 100%;
      background: red;
   }

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    
});
</script>
</head>
<body>

<div class="container">
          <div class="menu-container">
            <h1>Browse</h1>
            <menu-container></menu-container>
          </div>
          <div class="main-container">
<div><div class="container-header">some text</div>
  random text
</div>
          </div>
        </div>

</body>
</html>

希望对您有所帮助。

谢谢。

Answer 3

另一种不改变显示的可能解决方案属性:

.main-container {
    width: auto;
    vertical-align: top; // <= 
    display: table-cell;
}

CSS table 个单元格 div 上有 space

CSS table cells there is space on divs

html

css

css-tables

cells