边框合并（兄弟元素之间）

最新推荐文章于 2023-04-06 16:26:40 发布
最新推荐文章于 2023-04-06 16:26:40 发布
阅读量341 收藏
点赞数 1
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mike_95/article/details/108033926
版权

兄弟元素之间，水平方向上的边框正常，垂直方向上的边框边距由最大值决定

解决方案BFC
在任一一个兄弟元素上加一个div，从而触发BFC解决
如何触发一个盒子的BFC
1.position: absolute
2.display:inline-block
3.float:left
4.overflow:hidden

其实这个问题可以不解决，问题真是存在，设置的时候设置好上下边框的边距，这个问题就不会影响到整个；同时说回来，上面的解决方案，加了一个标签，从html层面解决问题，是不提倡

mike_95
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 父子外边距 兄弟内边距 趣味边框
u011302519的博客
07-31 655
理解父子之间用padding，兄弟之间用margin。 实例 图中外部div（A）里面包含两个div（B和C）。 ①②③⑤均为父子元素之间的间距 ④为兄弟之间的元素 第一种方案 使用“父子内边距，兄弟外边距”。 ①②③⑤，父子元素之间的空隙，均使用padding值撑开。 ④兄弟之间使用margin值撑开。 A元素 witdth:200px; padding:73px 55p...
1、4表格细线边框合并
qq_62865634的博客
10-08 1080
本文仅仅简单介绍了表格合并后边框会1+1=2，我们要让边框变为1+1=1，那么就加border-collapse：“collapse”
两个相邻的div边框合并
SL7664的博客
04-06 1849
【代码】两个相邻的div边框合并。
CSS中边框合并
qq_36836332的博客
08-07 7361
             1.两个元素上下放置时，上边元素的下边距和下边元素的上边距合并，边距值为两边距中的较大者              2.两元素嵌套时（父元素无边框）上下边距发生合并,如果父级没有边框，子集添加margin值时，相当于给父级添加                            margin值，父级移动，子集不移动              3.当一个空元素没有边框或填...
关于CSS边框合并问题简述
qq_43574437的博客
06-08 1306
关于CSS边框合并问题简述 一、子父类边框合并 问题概述：比如在父级中有一子级，父级外边框为20px，子级外边框为20px，当子级外边框变大时，打开浏览器发现子级外边框并没变化，而是父级外边框变化了子级边框的数值。 解决方法： 1.给父级元素设置外边框 2.将子级元素改变的外边框距离转换成父级元素的内边框距离 3.使用overflow：hidden；来隐藏父级超出定义的边框 4.使用行级元素跟块级元素的属性问题display：inline-block；来使其同时获得行级跟块级属性 5.利用浮动float来
谈谈CSS的边距合并之我的理解
09-25
- **相邻兄弟元素**：相邻的兄弟元素之间会发生边距合并。 - **嵌套元素**：当子元素的外边距大于父元素的外边距时，子元素的外边距会向上溢出，导致父元素的外边距被合并。 为了更好地控制元素间的间距，我们可以...
解决margin 外边距合并问题
12-14
### 一、兄弟元素的外边距合并 当两个或多个块级元素相邻，它们之间的外边距不会简单地相加，而是取两者中较大的一个作为它们之间的实际间距。例如，如果有两个相邻的div元素，一个设置上外边距为50px，另一个为100...
上海lamp兄弟连 css课件
07-26
2. **盒模型**：理解CSS盒模型是关键，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒模型决定了元素在页面上的占用空间。 3. **布局技术**：包括流体布局、响应式设计（使用媒体查询@...
权重，浮动，精灵，部分伪类伪元素示例
12-15
浮动元素会脱离正常文档流，向左或向右移动，直到其边框接触到包含块的边框或者另一个浮动元素。这在实现图文混排、创建多列布局时非常有用。但要注意，浮动可能导致父元素高度塌陷，可以使用清除浮动（如`clear:...
外边距折叠1
08-08
这个现象主要发生在相邻元素的垂直外边距上，尤其是兄弟元素和父子元素之间的关系。我们来深入探讨这个主题。 首先，我们要明白什么是外边距。外边距（Margin）是元素周围的空间，它不包括边框（Border），是元素与...
html元素父子级，兄弟级元素的外边距合并问题
zyj123__的博客
06-23 892
一、父子级元素 通常，大盒子中嵌套小盒子，如果给小盒子添加margin-top属性，则会出现大盒子和小盒子一起向下移动的现象。 html的 代码如下： <div class="outer"> <div class="inner"></div> </div> css代码如下 <style type="text/css"> .outer{ width: 400px; height: 400px; b
CSS之合并相邻边框
彤先森的博客
01-08 2392
css中边框的显示，合并
万豪给给的博客
08-08 4912
默认情况下，即使你写了border不为0，也只显示外边框，内边框是不显示的，要显示内边框可以这样 .table_border td { border-top:1px #DDD solid; border-right:1px #DDD solid; border-color:Blue;
html合并边框线,css中border-collapse属性设置表格边框线的方法
weixin_30781567的博客
06-24 5921
css中border-collapse属性设置表格边框线的方法发布时间：2020-08-31 11:41:02来源：亿速云阅读：99作者：小新这篇文章主要介绍css中border-collapse属性设置表格边框线的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！首先我们来了解一下css border-collapse属性是什么？它的作用。border-collapse ...
html元素父子级，兄弟级的外边距合并问题
rolinabc的博客
06-28 1577
一、父子级元素 通常，大盒子中嵌套小盒子，如果给小盒子添加margin-top属性，则会出现大盒子和小盒子一起向下移动的现象。 html的 代码如下： <div class="outer"> <div class="inner"></div> </div> css代码如下 <s...
margin边距合并问题
程麒阁的博客
07-18 614
问题重述 margin是外边距属性，它的定义是边框和边框之间的距离，但是有些时候这些边距是合并的，你知道这是怎么回事吗？ 代码演示 1.垂直边距合并 css .box1{ width: 100px; height: 100px; margin-bottom: 25px; background-color: #00FFFF; } .box2{ width: 100px; height: 100px; margin-top: 30px; background-color: #7CFC00; }
关于外边框相邻合并
fingerartist的博客
05-24 1450
关于外边框相邻合并@[TOC] 外边距合并以及清除外边距合并 什么是外边距合并和内外边距合并? 外边距合并以及内外边距合并的清除方式 外边距合并其实就是两个不同标签元素的外边距发生了合并，标签之间没有内边距、边框，设置外边距margin时，即两个外边距合并成了一个，显示边距大的。 那么问题来了，一般外边距合并有哪几种情况呢？小编这里就简单说一下三种情况，如有不周之处，还望指正！！！！ 1、两个块级兄弟元素。 2、父子级关系的元素。 3、页面固定位置的元素。 前两者就不多说了，相信很多人都遇见过，清除方式也很
HTML+CSS面试题-父子级元素外边距合并问题，兄弟元素外边距合并问题？
weixin_44486539的博客
10-29 439
父子级元素外边距合并问题 父级元素和子级元素在相同放向（top）同时设置 margin 值时，会出现合并现象； “标准文档流中”，竖直方向的margin不叠加，以较大的为准，给父级元素中的子级元素的竖直方向上设置 margin 时，父级元素与子级元素之间并不会产生 marign 距离。 解决方法： 给父级元素设置： overflow: hidden; 给父级元素设置边框： b...
css父子元素边框合并变粗
最新发布
06-07
当父元素和子元素都设置了边框时，可能会出现父子元素边框合并的情况，导致边框变粗。这是由于CSS盒模型的特性所致。 解决这个问题的方法有以下几种： 1. 给父元素添加 `padding` 或 `border`，这样父元素的边框就不会与子元素的边框重叠了。 2. 给子元素添加 `margin` 或 `padding`，这样子元素的边框就会在父元素的边框内部显示，从而避免了边框重叠问题。 3. 使用 `box-sizing: border-box` 属性，这个属性能够让元素的宽度和高度包括边框和内边距，从而避免了边框重叠问题。 以下是一个示例代码，演示如何使用 `box-sizing: border-box` 属性来解决父子元素边框合并问题： ```css .parent { border: 1px solid #ccc; box-sizing: border-box; } .child { border: 1px solid #ccc; box-sizing: border-box; margin: -1px; /* 这里使用负 margin 来抵消边框宽度 */ } ``` 希望这些解决方案能够对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值