为什么两个 css 表之间存在间隙？但是当我改用块时不是吗？

Question

当我给两个 DIV display:table 时，两个元素之间会出现一个小间隙。在另一个线程中，我读到当您放大时可能会发生这种情况，因为有人无法划分两个像素。

但这并不能解释为什么我给两个DIV时不会出现这个问题display:block，无论我放大多少，都没有差距。

所以我的问题是为什么会有差异，我怎样才能避免“表”之间出现差距？

感谢您的帮助...

Two Tables

.grid_container {
    display: grid;
    height: 600px;
    width: 50%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid_item {
    width: 100%;
    height: 100%;
}

.grid_item_content {
    width: 100%;
    height: 100%;
    transition: transform 3s;
    transform-style: preserve-3d;
}

.item_content_front {
    background-color: #d3dce6;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: table;

}

.item_content_back {
    background-color: #cfb0b1;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(.5turn);
    backface-visibility: hidden;
    margin-top: -300px;
    display: table;

}

p {
    display: table-cell;
    width: 100%;
    height:100%;
    vertical-align: middle;
    text-align: center;
}

.grid_item:hover .grid_item_content {
transform: rotateY(.5turn);
}

<!DOCTYPE html>

<html>
    
    <head>
     <meta charset="UTF-8"/>
<link rel="stylesheet" href="style/style1.css"/>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

        <body>
            <div class="grid_container">
                
                <div class="grid_item" id="grid_item_1">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Brauerei
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Unsere Biere
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_2">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Restaurant
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Öffnungszeiten
                            </p>
                        </div> 
                  </div>
                </div>
                                
                <div class="grid_item" id="grid_item_3">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Philosophy
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Beer gut, alles gut...
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_4">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Culture
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Sudwerk
                                Stammtisch
                            </p>
                        </div> 
                  </div>
                </div>
                
            </div>

<script src="js/code1.js"></script>
        </body>

</html>

Answer 1

没错，是子像素的问题。看起来 block 和 table 元素的宽度计算在父元素不是整像素宽度时（至少在 Chrome 上）略有不同，从而导致差异~0.4px.

您可以通过将显示设置为 block 或通过 calc(100% + 0.5px) 在宽度上添加子像素来解决此问题。

.a {
    background: red;
    height: 100px;
    width: 50%;
}

.b {
    background: yellow;
    width: 100%;
    height: 100%;
    display: table;
}

.d {
    display: block;
}

.c {
    width: calc(100% + 0.5px);
}

<div class="a">
    <div class="b">normal</div>
</div>
<div class="a">
    <div class="b c">display: block</div>
</div>
<div class="a">
    <div class="b d">width: calc(100% + 0.5px)</div>
</div>

Answer 2

如果真的很麻烦，您可以在 .item_content_back 和 .item_content_front

上设置 2px 填充

.grid_container {
    display: grid;
    height: 600px;
    width: 50%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

}

.grid_item {
    width: 100%;
    height: 100%;
    
}

.grid_item_content {
    width: 100%;
    height: 100%;
    transition: transform 3s;
    transform-style: preserve-3d;
    
}

.item_content_front {
    background-color: #d3dce6;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: table;
       padding: 2px;

}

.item_content_back {
    background-color: #cfb0b1;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(.5turn);
    backface-visibility: hidden;
    margin-top: -300px;
    display: table;
    padding: 2px;
}

p {
    display: table-cell;
    width: 100%;
    height:100%;
    vertical-align: middle;
    text-align: center;
}

.grid_item:hover .grid_item_content {
transform: rotateY(.5turn);
}

<!DOCTYPE html>

<html>
    
    <head>
     <meta charset="UTF-8"/>
<link rel="stylesheet" href="style/style1.css"/>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

        <body>
            <div class="grid_container">
                
                <div class="grid_item" id="grid_item_1">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Brauerei
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Unsere Biere
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_2">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Restaurant
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Öffnungszeiten
                            </p>
                        </div> 
                  </div>
                </div>
                                
                <div class="grid_item" id="grid_item_3">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Philosophy
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Beer gut, alles gut...
                            </p>
                        </div> 
                  </div>
                </div>
                
                <div class="grid_item" id="grid_item_4">
                  <div class="grid_item_content">
                        <div class="item_content_front">
                            <p>
                                Culture
                            </p>
                        </div>
                        <div class="item_content_back">
                            <p>
                                Sudwerk
                                Stammtisch
                            </p>
                        </div> 
                  </div>
                </div>
                
            </div>

<script src="js/code1.js"></script>
        </body>

</html>

为什么两个 css 表之间存在间隙？但是当我改用块时不是吗？

Why is there a gap between the two css-tables? but not when I use block instead?

css

css-tables