赵公口网站建设,网站导航优化,如何自己建立一个网站,最古老的网络营销方式这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 平常我们说的font-size#xff1a;0#xff1b;就是设置字体大小为0对吧#xff0c;但是它的用处不仅仅如此哦#xff0c;它还可以消除子行内元素间额外多余的空白#xff01; 问题描述#xff… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 平常我们说的font-size0就是设置字体大小为0对吧但是它的用处不仅仅如此哦它还可以消除子行内元素间额外多余的空白 问题描述 是否出现过当多个img标签平铺的时候会出现几个像素的间距就像这样(为了醒目加了个红色的框框) 是什么原因造成的呢 大家都知道img是行内元素比如当我们的标签换行的时候回车符会解析一个空白符所以这是造成会有间距的原因之一。 当然喽不仅仅是img包括其他的一些常见的行内元素比如span标签回车换行的效果同样也会间隙当然如果是缩进、空格等字符同样也会产生空白间隙导致元素间产生多余的间距 span背景图/spanspan背景图/spanspan背景图/spanspan背景图/spanimg classitem-img src./src/assets/login-bg.png alt背景图 img classitem-img src./src/assets/login-bg.png alt背景图 img classitem-img src./src/assets/login-bg.png alt背景图 如何解决呢 那我们首先想到取消换行、空格... 既然是因为标签换行了引起的那么我们就取消换行、空格等试一试。 span背景图/spanspan背景图/spanspan背景图/spanspan背景图/span
img classitem-img src./src/assets/login-bg.png alt背景图 img classitem-img src./src/assets/login-bg.png alt背景图 img classitem-img src./src/assets/login-bg.png alt背景图 证明方法还是有用的 那还有没有其他的方法解决呢那这个时候可以借助font-size:0来用一用。 如何使用font-size: 0 解决呢 利用font-size:0消除子行内元素间额外多余的空白,需要在父元素上添加font-size:0。 是不是就解决了呀 看一个完整的完整demo效果 当然需要注意一下 设置font-size: 0时子元素必须指定一个font-size大小否则文本内容不会显示哦 示例代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titledemo/titlestyle/*************************css代码***********************/ul {margin: 20px;display: flex;gap: 20px;}.item {width: 300px;height: 200px;padding: 20px;border-radius: 10px;background: #fff;overflow: hidden;font-size: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}.item-img {width: 100%;height: 175px;object-fit: cover;border-radius: 5px;}.item-text {color: #333;font-size: 14px;}span {background-color: red;padding: 10px;}/style
/head
bodyulli classitemimg classitem-img src./src/assets/login-bg.png alt背景图 p classitem-text《好看的背景图》/p/lili classitemimg classitem-img src./src/assets/login-bg.png alt背景图 p classitem-text《好看的背景图》/p/lili classitemimg classitem-img src./src/assets/login-bg.png alt背景图 p classitem-text《好看的背景图》/p/lili classitemimg classitem-img src./src/assets/login-bg.png alt背景图 p classitem-text《好看的背景图》/p/li/ul
/body
/html本文转载于: https://juejin.cn/post/7260752483055878204 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
