• 售前

  • 售后

热门帖子
入门百科

为什么两个行内块元素(内联元素)之间有空格

[复制链接]
hecgdge4 显示全部楼层 发表于 2022-1-16 16:57:15 |阅读模式 打印 上一主题 下一主题
如题,这是学习前期常常遇到的标题,以是就来讲讲为什么,怎么办。
为什么

起首先做一个 demo 出来,看标题是否存在。
  1. <div class="father">
  2.     <div class="son1"></div>
  3.     <div class="son2"></div>
  4. </div>
复制代码
  1. .father {
  2.     width: 200px;
  3.     height: 50px;
  4.     border: 1px solid red;
  5. }
  6.         
  7. .son1 {
  8.     display: inline-block;
  9.     width: 50px;
  10.     height: 50px;
  11.     background-color: #652373;
  12. }
  13.         
  14. .son2 {
  15.     display: inline-block;
  16.     width: 50px;
  17.     height: 50px;
  18.     background-color: #74BF75;
  19. }
复制代码

果然,中心有一道缝隙哈,现在我们来看看为什么。
用 JS 打印打印 father 盒子的全部子元素看看。
  1. [/code] [align=center][/align]
  2.  再看看这个 text 毕竟是啥。
  3. [align=center][/align]
  4. 没错,它竟然是两个子 div 之间的换行+背面的一系列空格。。。
  5. [align=center][/align]
  6. 这也是 HTML 自身的特性了。
  7.  
  8. [size=5]办理方案:[/size]
  9. [size=4]1.float:left[/size]
  10. 这是我最保举的方式。
  11. 缺点是没有缺点!
  12. 如代码所示,给两个子元素加上浮动。
  13. 留意,这里就要把两个子元素中 display:inline-block 的语句删掉了,float 属性中就带有这个效果。
  14. [code].son1 {
  15.     float: left;
  16.     width: 50px;
  17.     height: 50px;
  18.     background-color: #652373;
  19. }
  20.         
  21. .son2 {
  22.     float: left;
  23.     width: 50px;
  24.     height: 50px;
  25.     background-color: #74BF75;
  26. }
复制代码
 客户说效果很好,腿都不酸了。

2.把代码写在一行

  1. <div class="father">
  2.     <div class="son1"></div><div class="son2"></div>
  3. </div>
复制代码
效果同样,可以实现,但是正凡人都不风俗这么写。

3.把中心的文本表明掉

  1. <div class="father">
  2.     <div class="son1"></div><div class="son2"></div>
  3. </div>
复制代码
我想正凡人更不会这么写了。。
但是效果还是杠杠的。

4. 将父元素的 font-size 属性设置为0

  1. .father {
  2.     width: 200px;
  3.     height: 50px;
  4.     border: 1px solid red;
  5.     font-size: 0;
  6. }
复制代码
做的很好,下次不许再这么做了。。
由于通常元素中都是由笔墨的。你把字的巨细设置为0,固然没有缝隙了,但是其他字也表现不了了。

总结


第一种,浮动是最好的。
第二三钟,不加空格大概把空格表明掉,会粉碎代码的可读性和精美。
第四种,将父元素的字巨细设置为0,不保举利用。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作