时间戳

首页 > 解决方案 > Div 之间的奇怪边距

html - Div 之间的奇怪边距

问题描述

我在代码中遇到了一些奇怪的行为。我正在尝试用 flexbox 放置一排 div。这是一个片段：

html{
        width: 100%;
        height:100%;
        background:black;
        font-family: Impact;
        margin: 0px;}
    
    .columns{
        display:flex;
        justify-content: center;
    
    }
    
    .col-1{
        display:flex;
        align-items: center;
        justify-content: center;
    
        width:50%;
        background: green;
        color: white;
        height: 25vh;
        font-size: calc(5vw + 5vh + 2.5vmin);
        min-width: 200px;
        min-height:100px;
    
    }
    
    .col-2{
        display:flex;
        align-items: center;
        justify-content: center;
    
        width:50%;
        color:white;
        background: red;
        height:25vh;
        font-size: calc(5vw + 5vh + 2.5vmin);
        min-width: 200px;
        min-height:100px;
    
    }
    
    .score-1 {
        display:flex;
        align-items:center;
        justify-content: center;
        color:black;
        background:white;
        height:40vh;
        margin-left:9vw;
        margin-top:3vh;
        width:30%;
        min-width: 200px;
        min-height:100px;
    
        font-size:calc(12vw + 12vh + 2.5vmin);
    }
    
    
    .clock {
        display:flex;
        align-items:center;
        justify-content: center;
        margin-top:5vh;
        height:25vh;
        vertical-align:middle;
        font-size: calc(8vw + 8vh + 2.5vmin);
        background:white;
        color:cadetblue;
    
    }
    
    .score-2 {
        display:flex;
        align-items:center;
        justify-content: center;
        color:black;
        background:white;
        height:40vh;
        margin-right:9vw;
        margin-top:3vh;
        width:30%;
        min-width: 200px;
        min-height:100px;
    
        font-size:calc(12vw + 12vh + 2.5vmin);
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css">
        <title>Skore</title>
    </head>
    
    <body>
        <div class=columns>
            <div class="col col-1"> SOLDATOVA  </div>
            <div class="col col-2"> DROR Y B </div>
        </div>
    
        
        <div class=columns>
            <div class="col country-1"> 45 </div>
    
            <div class="col country-2"> 0 </div>
    
        </div>
    
    
        <div class=columns>
            <div class="score-1">45</div>
            <div class="clock">3:00</div><
            <div class="score-2">0</div>
    
        </div>
    
    
    </body>
    </html>

clock和之间有一个差距score-2，但是 columns我正在使用的属性justify-content: center;，所以我认为它内部的 div 之间没有边距，所以我不确定这里发生了什么。有什么办法解决吗？

标签： htmlcss

解决方案

推荐阅读