图片并排

在尝试使4张图片并排显示时,遇到图片之间因回车产生空隙的问题。通过检查盒子模型并未发现多余margin和padding。经研究发现,内联元素间的回车被浏览器解析为空格。解决方案包括:1) 取消回车以消除空白字符,但降低代码可读性;2) 将父级元素的font-size设置为0,有效解决问题且保持代码可读性。
摘要由CSDN通过智能技术生成

图片并排遇到的问题

本来想实现4张图片并排显示,于是将图片放置div里面,设置div宽度,然后设置图片宽度为25%,原以为会并排显示,但是出现了一点问题。

下面是我的代码和效果:

代码:

效果:

可以看到并没有排在一起,因为图片之间出现了空隙,于是我去查看盒子模型,看哪里出现问题

但是盒子模型并没有多余的margin和pandding,百思不得其解,于是我去网上进行提问,然后给出的答案是内联元素出车会产生空格问题。但是为什么内联元素会产生空格呢?因为浏览器将多个空白字符解析为单一空格,因为我们回车的原因,第一个img标签和第二个img标签之间产生多个空白字符。

接下来就是解决问题了

第一种解决方案:

取消回车

代码:

这样的话就不会产生空白字符了,但是这样的话代码的可读性变差。

第二种就是将父级元素的font-size设置为0

代码

最终都实现了图片并排

 

 


  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Typora中实现图片并排显示,你可以使用HTML语法来处理。首先,确保你已经将图片上传到图床并获取到图片链接。然后,使用以下HTML代码将两张图片并排显示: <center class="half"> <img src="img1.jpg" width="300"/> <img src="img2.jpg" width="300"/> </center> 其中,img1.jpg和img2.jpg分别是你上传到图床的两张图片的链接。通过设置width属性,你可以调整图片的宽度以适应页面布局。这段代码会将两张图片居中并以相同宽度并排显示。你可以将这段HTML代码直接粘贴到Typora的编辑器中,预览时即可看到图片并排显示的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Typora中将多张图片并排/分行显示](https://blog.csdn.net/qq_43444349/article/details/107292803)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [在typora中实现文本和图片并排显示](https://blog.csdn.net/hello_world_banni/article/details/109671543)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值