盒子底部的秘密嘿,大家好啊!今天咱们来聊聊盒子底部的那些事儿。你有没有遇到过这样的情况:明明内容已经撑满了盒子,但是底部却还有一块空白?这是为啥呢?别急,且听我慢慢道来。 环境变量的设置首先,我们来说...
盒子底部的秘密
嘿,大家好啊!今天咱们来聊聊盒子底部的那些事儿。你有没有遇到过这样的情况:明明内容已经撑满了盒子,但是底部却还有一块空白?这是为啥呢?别急,且听我慢慢道来。
环境变量的设置
首先,我们来说说环境变量的设置。在河南话里,这事儿可简单了,就四个字——“复制粘贴”!没错,就是这么直接。找到 Java 文件夹,复制地址,然后打开高级系统设置里的环境变量,选择新建,把地址粘贴进去,确认就完事儿了。
盒子底部的缝隙
接下来,我们来解决盒子底部的缝隙问题。这可难不倒我,我有三个小妙招。
第一招,把 img 设置为 block,display:block,这样图片就会变成块级元素,占据一行,就不会有缝隙了。
第二招,设置 img 的竖直对齐,v-align:bottom,让图片底部与盒子底部对齐。
第三招,设置父级 div 的 font-size:0,这样父级 div 就不会有文字大小了,也就不会有缝隙了。
怎么样,这三招够不够用?如果还不够,那就再来一招,设置外层 div 的行高,line-height:0px,让盒子底部与行高对齐,也就没有缝隙了。
对齐方式与书写模式
最后,我们来聊聊对齐方式与书写模式。这两者有关系吗?当然有!在对齐项目时,我们不会考虑是否将其对齐到顶部、右侧、底部和左侧的物理尺寸,而是根据正在使用的特定维度的开始和结束来描述对齐方式。这样不管文档具有怎样的书写模式,对齐方式总是以相同的方式工作。
查看更多