div与span;图与图之间空隙的清除

CSS 专栏收录该内容
5 篇文章 0 订阅

div与span:

span: display为inline,不可以设置宽高,只能通过定义padding来设置它的大小.
div: display为block,可以设置宽高。在div中输入一连串中间没的字母,将有一些字母超出div本身的长度,如:

<div style="width: 50px;height: 50px;background: purple">aasdasda</div>

结果如下:
在这里插入图片描述
这是因为系统将它理解为一个单词了,只需要在字母中间加个空格即可,如下

<div style="width: 50px;height: 50px;background: purple">1asd asda</div>

结果如下:
在这里插入图片描述

图片与图片之间的空隙

例:

<img src="zlycbz.jpg" alt="">
<img src="zlycbz.jpg" alt="">
<img src="zlycbz.jpg" alt="">

图如下:在这里插入图片描述
可以看到,三个图中间都存在空隙

解决方法

1.将<img>之间的空格删除: <img src="zlycbz.jpg" alt=""><img src="zlycbz.jpg" alt=""><img src="zlycbz.jpg" alt="">
2.定义font-size="0"
3.将图片都定义一个往方向浮动

<img src="zlycbz.jpg" alt="" style="float: left;">
<img src="zlycbz.jpg" alt="" style="float: left;">
<img src="zlycbz.jpg" alt="" style="float: left;">
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值