首先声明一点,transform: scale对行内元素无效,而对块级元素和原子行内级元素生效等。
在开发中,有时会因满足设计需要而对元素进行整体缩放,transform: scale是现代浏览器都支持的css元素,应该是首选,但它会引发一个问题,虽然可以缩小整体显示的内容,但是并没有引起重排,所以占据的实际空间没有缩小,具体看下面的代码以及图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用scale缩小之后实际空间没有减小的问题解决</title>
<style type="text/css">
i {
font-style: normal;
}
.container {
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 140px;
padding: 5px 10px 7px;
display: inline-block;
height: 48px;
line-height: 48px;
padding: 0 10px;
text-align: center;
color: #fff;
background: linear-gradient(270deg, rgba(237,8,2,1) 0%,rgba(253,82,22,1) 100%);
border-radius: 30px;