内联块 div 在活动状态下改变高度答案

【问题标题】：Inline Block divs changing height on Active State内联块 div 在活动状态下改变高度
【发布时间】：2019-08-27 18:02:41
【问题描述】：

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

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

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 的高度/宽度或样式。

【问题讨论】：

标签： html css

【解决方案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;
    }

基本上：

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

请告诉我它是否适合你。

【讨论】：

【解决方案2】：

我同意@santamanno 对box-sizing: border-box; 的看法，您应该将其应用于您的所有代码。见https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

如果您想/或需要保留元素 display: inline-block; 并且不介意额外的跨度，我会使用 transform 来缩放文本，它不会影响元素的布局并且不会不会导致重绘，而且它的动画效果非常好：D。

.div span {
  display: block;
}
.div:active span {
  /* font-size: 3.8rem; */
  /* padding-top: 5px; */
  transform: scale(0.9);
}

【讨论】：