CSS 去除边框重叠 border-bottom: none；

已于 2022-01-27 11:58:39 修改
阅读量2.1k 收藏
点赞数
分类专栏： CSS 文章标签： css css3 html
于 2022-01-19 16:03:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lryh_/article/details/122582976
版权

如下两个盒子，盒子的下边框 和 盒子一 的上边框 重叠

两盒子width不同时，去除方法如下：

1、给下面盒子的上边框设置 负数的值：margin-top: -2px; 

2、给上面盒子的下边框设置 负数的值：margin-bottom: -2px; 

两盒子width相同时，去除方法如下：

1、给上面盒子的下边框设置：border-bottom: none;

 2、给下面盒子的上边框设置：border-top: none;

lryh_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css如何去掉重叠部分的边框？（收藏）
lin123_00的博客
05-05 7461
在前端开发中，边框border属性是经常会用到的一个属性，它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题，边框会重叠在一起（如下图），那么如何去掉重叠部分的边框？ 首先小编在这里谢谢大家一直的支持，每天都会更新十个web前端基础内容，需要的可以关注我，另外也可以进我的web学习交流群1045267283，领取资料学习资料笔记，可以跟里面的小伙伴一起学习一起成长，不懂...
用CSS设置表格Table的细边框的比较好用的方法
09-25
`border-collapse:collapse` 属性使得单元格之间的边框合并，避免了边框重叠的问题，而 `border:none;` 则移除了表格自身的边框。这样，即使在Word中打开，也能保持细边框的效果。 以下是一个示例代码： ```html ...
css如何去掉重叠部分的边框
rainylf的博客
12-07 491
css去掉重合边框
CSS学习笔记07 盒子模型
weixin_34292924的博客
06-20 97
1、盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 用公式表示就是：盒子=边框+内边距+内容区域+外边距 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的...
css如何去掉重叠部分的边框，CSS中nth-child不生效
最新发布
HDdgut的博客
04-28 491
不生效，造成这样的原因是因为父选择器没选择正确。
html中隐藏下边框线,css如何设置下边框不显示？
weixin_35057804的博客
06-03 3548
在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。我们可以通过设置border-bottom属性为none来设置下边框不显示。示例：p{border-style:solid;border-...
css如何去掉重叠部分的边框？
weixin_43294092的博客
07-02 1715
css如何去掉重叠部分的边框？ 在前端开发中，边框border属性是经常会用到的一个属性，它可以给元素添加边框；但两个相邻的元素在一起同时添加了边框，就会出现一个问题，边框会重叠在一起（如下图），那么如何去掉重叠部分的边框？ 本篇文章就给大家介绍css解决边框重叠，即css去掉重叠边框的方法，让相邻的边框之间可以是单线的方式显示。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 边框重叠可以分为两种情况，分别为： 1、div，ul等元素盒子设置边框后的重叠问题 2、table表格设置边框后
border:0;和border:none;的区别
hardgirls的博客
06-25 4361
感觉它和display:none;与visibility:hidden;的关系类似；   而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。   1.性能差异 对比border:0;与border:none;之间的区别在于有渲染和没渲染； 【border:0;】把CSS中的border设为“0”像素虽然在
CSS:关于盒子边框border边框合并，不让两个单元格之间的边框出现重叠
weixin_46682277的博客
12-07 7588
当我们给table td添加border属性后，会发现单元格之间的边框会发生重叠，从而使边框线变粗，这时候可以通过CSS属性中的collapse进行合并: table,td{ border-collapse:collapse; } border-collapse:collapse的意思就是表示相邻边框合并在一起，解决单元格之间边框重叠的情况。 ...
最全前端面试题-2（css篇-上百篇题集整理1个月）
05-04
CSS3 特性】：CSS3引入了许多新特性，如边框圆角（border-radius）、阴影效果（box-shadow）、多列布局（multi-column layout）、文字阴影（text-shadow）、线性渐变（gradient）、旋转（transform）、缩放、定位、...
用css实现十字的布局示例代码
09-25
border-bottom:0;` 这里取消了右边界和下边界，以形成十字交叉的效果。注意到，为了避免在某些浏览器中的边界重叠问题，使用了负的`margin-left`和`margin-top`进行微调。 - `margin-left:-2px; margin-top:-1px;`...
CSS简单实现重叠线效果
09-25
重叠线效果在网页上也普遍应用，实现方法各种各样，下面为大家介绍下使用css是如何实现的，具体样式代码如下，感兴趣的朋友可以参考下
CSS.docx
11-26
CSS中的`position`属性配合`top`, `bottom`, `left`, `right`可实现元素的绝对定位和相对定位。对于重叠效果，还可以通过`z-index`属性来控制元素的堆叠顺序。 【网页布局】 在CSS布局中，`<div>`标签常用于创建...
HTML与CSS面试题.docx
01-14
CSS3的新特性包括动画、过渡、阴影、border、平移、旋转等。ES6的新特性包括const、let、解构赋值、promise、箭头函数、扩展运算符、对象简写等。 CSS部分： 1. 盒模型宽度/高度计算： 盒模型宽度（高度同宽度）= ...
CSS解决border重叠的问题
lannieZ的博客
12-29 5782
margin: 0 -1px -1px 0;
css解决边框重叠问题
热门推荐
往后橘生
10-22 1万+
在某些情景下，多个元素的边框是重叠在一起的，这样内部边框就会因为重叠而显得比较粗。如下图所示。 而解决这个问题的方法有很多，这里推荐一种，给带有边框的元素设置如下样式margin：0 0 -borderwidth -borderwidth 这里的borderwidth即为边框的宽度，按照上图所示，则添加样式 margin: 0 0 -1px -1px;...
CSS去重叠边框合并
彭世瑜的博客
10-30 2378
1.table去重叠边框 table{ border-collapse:collapse; } 2.非table去重叠边框 只需要设置div的margin值为边框值的相反数就行 div{ border:1px solid #333; margin-right:-1px; margin-bottom:-1px; } 参考 CSS去重叠边框 ...
CSS-边框底部样式 | border-bottom-style
weixin_33991418的博客
09-13 2455
border-bottom-styleCSS属性设置元素的底部的线条样式border。 /* Keyword values */ border-bottom-style: none; border-bottom-style: hidden; border-bottom-style: dotted; border-bottom-styl...
css边框重叠解决
weixin_46522160的博客
02-04 2141
相邻的盒子设置边框后，相邻位置处的边框便会重叠，导致样式不美观；
CSS属性，增加单元格内的文本自动换行单元格高度自动调整， .scr-table { width: 80%; height: auto; margin-top: 30px; border-spacing: 0; text-align: center; border-top: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; table-layout: fixed; margin-left: 5%; margin-right: 5%; } .scr-table th { padding: 5px; background: #63a2e8; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; font-weight: 300; font-size: 6px; line-height: 15px; } .scr-table td { width: auto; padding: 5px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; white-space: nowrap; overflow: hidden; font-size: 6px; text-align: left; height: auto; } .scr-table tr { width: auto; height: auto; }
07-16
根据你提供的 CSS 代码，你想要实现单元格内文本的自动换行，并且希望单元格的高度能够自动调整。以下是对你的代码的建议修改： ```css .scr-table { width: 80%; margin-top: 30px; border-spacing: 0; text-align: center; border-top: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; table-layout: fixed; margin-left: 5%; margin-right: 5%; } .scr-table th { padding: 5px; background: #63a2e8; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; font-weight: 300; font-size: 6px; line-height: 15px; } .scr-table td { padding: 5px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; white-space: normal; /* 修改为 normal */ word-break: break-word; /* 添加此属性 */ font-size: 6px; text-align: left; } .scr-table tr { height: auto; } ``` 这些修改会将 `white-space` 属性设置为 `normal`，使文本自动换行；并且添加了 `word-break` 属性，以确保长单词或 URL 在必要时进行断行。 希望这些修改能满足你的需求。如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值