收藏
天蓬老师批改状态：合格
老师批语：非常直观
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>列间隙的二种设置方案</title></head><style>* {margin: 0px;padding: 0px;box-sizing: border-box;}.box1 {background-color: darkturquoise;width: 50vw;height: 20vh;border: 1px solid red;float: left;margin-right: 1em;border-radius: 1em;}.box2 {background-color: wheat;width: calc(50vw - 1em);height: 20vh;border: 1px solid red;float: left;border-radius: 1em;}.box3 {background-color: darkturquoise;width: 50vw;height: 20vh;border: 1px solid red;float: left;margin-right: 1vw;border-radius: 1em;margin-top: 1em;}.box4 {background-color: wheat;width: calc(50vw - 1vw);height: 20vh;border: 1px solid red;float: left;border-radius: 1em;margin-top: 1em;}</style><body><div><div class="box1"></div><div class="box2"></div></div><div><div class="box3"></div><div class="box4"></div></div></body></html>
使用百分比的话，2者距离会随着可视窗口的大小而发生变化。但是使用1em的话，二者距离不变。
二者区别效果图：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
