css中怎么让图片有间隔

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中如何让图片有间隔?以下是一些实现方法:img { margin-right: 20px; /*设置图片右边距离为20像素*/ } 上述代码将在每张图片的右侧添加20像素的空白间隔。img +

CSS中如何让图片有间隔?以下是一些实现方法:

img {
    margin-right: 20px;
    /*设置图片右边距离为20像素*/
} 

上述代码将在每张图片的右侧添加20像素的空白间隔。

img + img {
    margin-left: 20px;
    /*设置图片与图片之间的间距为20像素*/
} 

如果需要设置图片与图片之间的间距,可以使用上面的代码。需要注意的是,这里使用了“相邻兄弟选择器”(即“+”符号),表示选取前一个兄弟元素后紧跟的第一个匹配的后续兄弟元素。

div {
    column-count: 3;
    column-gap: 20px;
    /*设置3列布局,每列间隔为20像素*/
}
img {
    display: block;
    /*将图片转换为块级元素,实现采用列布局*/
} 

如果需要实现采用列布局的图片,并且每列之间有间隔,可以使用上面的代码。其中“column-count”属性设置为3表示采用3列布局,“column-gap”属性设置为20像素表示每列之间间隔为20像素。

这些方法都可以在CSS中让图片拥有间隔,并且可以灵活地根据需求进行调整。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么让图片有间隔

粉丝

0

关注

0

收藏

0

已有0次打赏