html - 内联 block div 在事件状态下改变高度

Question

我想在我的屏幕上有 4 个框，它们具有一些主动效果，例如更改字体大小和一些 padding-top(将文本向下移动一点)。一切正常，除了当我单击框时，它会在该框或相邻框周围添加空白。

我已经尝试在 div 内添加一个 span，内联 block 100% 高度/宽度，并将 :active 类应用于该 span，然后它对顶部的两个框可以正常工作，但底部的两个框仍然可以同样的事情。

https://jsfiddle.net/946v3o1t/4/

<div id="container"><div class="div one">div1</div><!-- 
--><div class="div two">div2</div><!-- 
--><div class="div three">div3</div><!-- 
--><div class="div four">div4</div></div>


@import url('https://fonts.googleapis.com/css?family=Acme|Righteous&display=swap');

body, html{
    padding: 0;
    margin: 0;
    user-select: none;
    font-family: 'Acme', sans-serif;
        }
#container{
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow: none;
    }
.div{
    height: 50vh;
    width: 50vw;
    max-width: 50%;
    display: inline-block;
    text-align: center;
    line-height: 50vh;
    color: white;
    font-size: 4rem;
    overflow: none;
}
.div:hover{
    cursor: pointer;
}
.div:active{
    font-size: 3.8rem;
    padding-top: 5px;
}
.one{
    background-color: #005b9f;
}
.two{
    background-color: #004c40;
}
.three{
    background-color: #6c6f00;
}
.four{
    background-color: #a00037;
}

我需要更改什么，以便当我点击框时，它只更新样式的内容，而不更改相邻 div 的高度/宽度或样式。

Answer 1

尽管实现此目的的最佳方法是 new CSS grid spec或 flex ，我已经在此处更新了您的代码，因此它可以正常工作:

https://jsfiddle.net/xL8g9jyh/

    .div{
        height: 50vh;
        width: 50vw;
        display: block;
        text-align: center;
        line-height: 50vh;
        color: white;
        font-size: 4rem;
        overflow: none;
        float:left;
        box-sizing: border-box;
    }

基本上:

1. 使用 float:left 和 display:block 代替 display:inline-block 和 max-width。
2. 使用 box-sizing: border-box;所以当您添加填充时 div 不会改变大小。
3. 此外，不要忘记分配 overflow: hidden;在 body css 元素中，因为这会锁定 body 的全局大小，从而防止无意中显示滚动条。

请告诉我它是否适合您。