使用border-box并排排列四张图片之间的非外边距空隙怎么消除？

最新推荐文章于 2023-03-06 13:20:53 发布

Ivymemphis

最新推荐文章于 2023-03-06 13:20:53 发布

阅读量442

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44410783/article/details/115132069

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

并排排列四张图片之间的空隙怎么消除？

1. 这个空隙哪来的？
2. 怎么消除？

其实并排排列四张图片并没有什么难度，但是今天在复习用border-box布局的时候，总是达不到效果~解决后写篇博客加深印象

1. 这个空隙哪来的？

在这里插入图片描述
明确这个空隙不是margin，那这个空隙是什么呢？
img元素是行内元素，行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理
这个时候看我的代码：

<style>
  *{
    margin: 0;
    padding: 0;
  }
  img{
    box-sizing: border-box;
    width: 25%;
    /* padding: 2px; */
    border:solid deeppink;
  }
</style>
<body>
  <div style="width: 400px;height:300px;border:1px solid darkgray;background-color: rgb(42, 15, 116);">
    <img src="./cat.jpg" alt="">
    <img src="./cat.jpg" alt="">
    <img src="./cat.jpg" alt="">
    <img src="./cat.jpg" alt="">
  </div>
</body>

果然，四个图片后面都有个回车，这个回车被转成一个空白符，这就是造成空隙的原因

2. 怎么消除？

知道了问题出现在哪里，就该想办法解决了~

2.1 方法一（子元素间不写任何空格回车）

<body>
  <div style="width: 400px;height:300px;border:1px solid darkgray;background-color: rgb(42, 15, 116);display:table;">
    <img src="./cat.jpg" alt=""><img src="./cat.jpg" alt=""><img src="./cat.jpg" alt=""><img src="./cat.jpg" alt="">
  </div>
</body>

这个解决办法简单，但是咱们的代码可读性降低了

2.2 方法二（子元素设置浮动）

子元素都设置float，父元素若不设置高度，会造成高度坍塌

2.3 方法三（父元素设置display:table）

问题到这就结局了~
在这里插入图片描述
我是看这篇博客才解决的问题，写的很详细，把地址挂这儿啦~
https://blog.csdn.net/qq_32614411/article/details/82223624

Ivymemphis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用border-box并排排列四张图片之间的非外边距空隙怎么消除？

用border-box并排排列四张图片之间的空隙怎么消除？1. 这个空隙哪来的？2. 怎么消除？2.1 方法一（子元素间不写任何空格回车）2.2 方法二（子元素设置浮动）2.3 方法三（父元素设置display:table）其实用border-box并排排列四张图片并没有什么难度，但是今天在复习这块的时候，总是达不到效果~解决后写篇博客加深印象1. 这个空隙哪来的？明确这个空隙不是margin，那这个空隙是什么呢？img元素是行内元素，行内元素排版的时候，元素之间的空白符（空格、回车换行等）都
复制链接

扫一扫