html網格中的神秘空白

Question

我試圖在一個網格中放置 3 個元素，我在圖像元素和 h1 元素之間得到了一堆空白，我不確定為什么。 如果我用另一個 h1 元素替換圖像元素，空白就會消失。 有什么想法嗎？

<html>
    <head>
        <style>

            .first-column {
            grid-column:1;
            grid-row:1;
          }

          .second-column {
            grid-column:2;
            grid-row:1;
          }

          .third-column {
            grid-column:3;
            grid-row:1;
          }

          div.container-button-grid {
            margin: 20 auto;
            width: 700px;
            text-align: center;
            display:grid;
            grid-column-gap:0px;
          }

          h1 {
              font-size: 30px;
              margin:0 0;
              padding:0px 0px;
              background:lightgreen;
          }

          img {
            width: 40px;
            height: 40px;
            background:red;
          }
        </style>

    </head>

    <body>
        <div class="container-button-grid">
            <img class="first-column" src="../images/Logo.png"></img>
            <h1 class="second-column">Test</h1>
            <button class="third-column" type="button" class="button"> 
                Reviews
            </button>
          </div>
    </body>
</html>

Answer 1

Grid為您定義的網格數量使用相等的空間。
您需要為grid-template-columns賦予值以賦予該列特定的寬度。
您需要在.div.container-button-grid設置grid-template-columns 。
刪除</img>因為img標簽是自關閉標簽。

 .first-column { grid-column:1; grid-row:1; } .second-column { grid-column:2; grid-row:1; } .third-column { grid-column:3; grid-row:1; } div.container-button-grid { margin: 20px auto; width: 700px; text-align: center; display:grid; grid-column-gap:0px; grid-template-columns: 40px 1fr 1fr; /* change 40px as per your requirement */ } h1 { font-size: 30px; margin:0 0; padding:0px 0px; background:lightgreen; } img { width: 40px; height: 40px; background:red; }

 <div class="container-button-grid"> <img class="first-column" src="https://via.placeholder.com/150" /> <h1 class="second-column">Test</h1> <button class="third-column" type="button" class="button"> Reviews </button> </div>

Answer 2

您的img具有固定width 。 如果你不會在css中指定它，就不會有間隙。

 .first-column { grid-column:1; grid-row:1; } .second-column { grid-column:2; grid-row:1; } .third-column { grid-column:3; grid-row:1; } div.container-button-grid { margin: 20 auto; width: 700px; text-align: center; display:grid; grid-column-gap:0px; } h1 { font-size: 30px; margin:0 0; padding:0px 0px; background:lightgreen; } img { /*width: 40px;*/ height: 40px; background:red; }

 <html> <head> </head> <body> <div class="container-button-grid"> <img class="first-column" src="../images/Logo.png" alt="" /> <h1 class="second-column">Test</h1> <button class="third-column" type="button" class="button"> Reviews </button> </div> </body> </html>

如果您希望img以特定大小離開，例如用div包裹它。

 .first-column { grid-column: 1; grid-row: 1; } .second-column { grid-column: 2; grid-row: 1; } .third-column { grid-column: 3; grid-row: 1; } div.container-button-grid { margin: 20 auto; width: 700px; text-align: center; display: grid; grid-column-gap: 0px; } h1 { font-size: 30px; margin: 0 0; padding: 0px 0px; background: lightgreen; } img { width: 40px; height: 40px; /*background: red;*/ } .img-wrapper { border: 1px dotted black; background: red; }

 <html> <head> </head> <body> <div class="container-button-grid"> <div class="img-wrapper first-column"> <img class="" src="../images/Logo.png" alt="" /> </div> <h1 class="second-column">Test</h1> <button class="third-column" type="button" class="button"> Reviews </button> </div> </body> </html>

PS 同時刪除</img>標簽，你像這樣使用它<img class="first-column" src="../images/Logo.png" alt="" /> 。 將alt添加到其中

html網格中的神秘空白

問題描述

2 個解決方案

解決方案1
2 已采納 2020-02-01 13:09:50

解決方案2
1 2020-02-01 13:15:30

html網格中的神秘空白

問題描述

2 個解決方案

解決方案1 2 已采納 2020-02-01 13:09:50

解決方案2 1 2020-02-01 13:15:30

解決方案1
2 已采納 2020-02-01 13:09:50

解決方案2
1 2020-02-01 13:15:30