3

div コンテナー内にいくつかの div をラップしましたが、境界線と要素の間に奇妙なスペースが見られます。問題はchrome と edgeで発生しています。Mozillaを試してみましたが、うまくいきました。

カスタムCSSを使用して、ブートストラップを使用しています。

関連するコードも共有しています：

.fullScreen {
  height: 100vh;
  width: 100vw;
}

.mainContainer {
  align-items: center;
  justify-content: flex-start;
}

.row {
  margin: 0!important;
}

#box {
  margin: 0 0 0 5vh;
  height: 90vh;
  width: 90vh;
}

.rowEndings {
  height: 36vh;
}

.rowMid {
  height: 18vh;
}

@media (orientation: portrait) {
  .mainContainer {
    align-items: flex-start;
    justify-content: center;
  }
}
<!-- adding bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


<html lang="en" class="fullScreen">

<body class="fullScreen">
  <div class="mainContainer row fullScreen">
    <div id="box" class="border border-dark">

      <div class="row rowEndings border border-dark"></div>

      <div class="row rowMid border border-dark"></div>

      <div class="row rowEndings border border-dark"></div>

    </div>
  </div>
</body>

</html>

スニペットでは配置は完璧に見えますが、私にはいくらかのスペースが表示されています。そのためにいくつかの切り取りを添付しています：

ここに画像の説明を入力

ここに画像の説明を入力

パディングとマージンに問題はないと思います。どんな助けでも大歓迎です:)

更新:エッジでも同じことが起こっています。そして、要素に追加した5vhのマージンを削除すると、問題は解決し#boxます。

4

5 に答える 5