css两个相邻块之间有条白线

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

在 CSS 中,当两个相邻的块级元素之间没有边框或间距时,它们之间会出现一条细小的白线。许多开发者在设计 Web 页面时可能会不喜欢这个默认行为,而希望两个块级元素之间没有白线。/* 去除相邻块之间的

在 CSS 中,当两个相邻的块级元素之间没有边框或间距时,它们之间会出现一条细小的白线。许多开发者在设计 Web 页面时可能会不喜欢这个默认行为,而希望两个块级元素之间没有白线。

/* 去除相邻块之间的白线 */
div {
  border-collapse: collapse;
}
div + div {
  border-top: none;
} 

以上这段 CSS 代码就能够去除两个相邻块之间的白线。首先,使用 border-collapse: collapse; 属性将边框合并在一起。其次,通过 div + div 选择器选中相邻的两个 div 元素,并为它们设置 border-top: none; 属性,使它们之间没有边框。

当然,如果您希望保留两个相邻块之间的一些间距,只需将 border-top: none; 属性替换为 margin-top: 10px; 等属性即可。

如有需要,您也可以使用其他选择器或属性来实现相同的效果。这里提供的 CSS 代码仅供参考。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两个相邻块之间有条白线

粉丝

0

关注

0

收藏

0

已有0次打赏