外边距问题

最新推荐文章于 2024-11-07 19:48:34 发布
最新推荐文章于 2024-11-07 19:48:34 发布
阅读量47 收藏
点赞数
分类专栏： html+css学习 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49553751/article/details/132939548
版权

合并现象

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin的较大值

塌陷问题

场景：父子级标签，子级添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决办法：

  • 取消子级margin,父级设置padding
  • 父级设置overflow:hidden
  • 父级设置border-top
  • 代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 解决方法一 */
            /* padding-top: 50px;
            box-sizing: border-box; */

            /* 解决方法二：原理是浏览器找到父级盒子的具体边缘*/
            /* overflow: hidden; */

            /* 方法三：让浏览器找到父级盒子的正确边缘 */
            border-top: 50px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: skyblue;

            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>
</html>

css外边距问题和显示模式
hewoqukanhai的博客
09-25 119
1 外边距问题结构关系：嵌套块元素的垂直外边距塌陷问题描述：当父元素没有padding，margin，border时子元素与父元素直接相邻、子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果是正值取两者中的较大值，负值取绝对值较大的值。表现：父子元素公用一个外边距解决方法给父元素设置边框或内边距（慎用）父元素overflow:hidden，改变规则结构关系：相邻元素垂直外边距合并。
外边距溢出问题
weixin_48047636的博客
04-26 466
CSS <style> div{ width: 300px; height: 300px; background-color: pink; /* 解决方法一:上边框不加颜色的话就用透明颜色 */ /* border: 1px solid transparent;*/ /* 解决方法二: */ /* paddin
css外边距问题
tttbbchfgg的博客
11-28 221
在盒子的嵌套中，会出现外边距塌陷的问题，也就是当父元素与子元素同时设置外边距时，会出现不能设置子元素外边距的情况。当同级的盒子外边距相交时会发生重叠，取外边距大的作为两个盒子相交处的外边距。其中最为常用的方法是在父元素中加入bfc条件 : overflow:hidden;解决方法：触发bfc。
外边距重叠问题
u011150251的博客
04-12 436
外边距重叠也可以称之为外边距塌陷，见名可知其意，外边距重叠就是不同元素上下外边距重叠到一起。
img标签默认有外边距吗_解决img标签自带外边距问题
weixin_42364855的博客
02-01 2311
三种方法去除img标签自带外边距。 #img img{height: 100px;}#bottom{width: 100px;height: 100px;background-color: red;}页面效果：图1-img的高度是100px图2-父容器div的高度却是104px第一个div中包裹img标签，img标签的高度设置为100px，但是第一个div的高度却是104px。上面图1中可以...
外边距塌陷问题
weixin_52310583的博客
05-06 336
有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。/*解决外边距塌陷的解决代码-4：给父元素加浮动【不推荐，可能带来未知的错误】*//*解决外边距塌陷的解决代码-5：给父元素设置display：table;/*解决外边距塌陷的解决代码-2：给父元素加溢出css*//*解决外边距塌陷的解决代码-3：给父元素加固定定位*//*解决外边距塌陷的解决代码-6：使用子绝父相*//*解决外边距塌陷的解决代码-1：给父元素加边框*/1.什么是外边距塌陷。
外边距问题及解决方法/overflow详解
weixin_72109350的博客
08-14 542
溢出显示，默认值 overflow: hidden;溢出显示滚动条，横向和纵向滚动条都显示 overflow: auto;2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'.现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；1.元素嵌套关系，子元素的margin-top值会叠加给父元素；/* overflow-x 只包括水平方向。两个值不同，取较大值。...
CSS中的外边距塌陷问题(外边距合并)及解决方法
qq_68510847的博客
08-09 473
外边距合并（叠加）的七种解决办法
外边距合并问题
会飞的笨蛋Y的博客
01-02 846
1.外边距合并 外边距合并指的是：当两个（垂直外边距）相遇时，它们将合并成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中较大的那个。 2.发生合并的几种情况 父子元素之间 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。 解决办法： 方法一：给父元素的overflow属性设置为hidden。 方法二：给父元素添加border属性； 方法三：给父元素设置内边距(padding)； 兄弟元素之间 当一个元素出现在另
html之垂直外边距问题
a695005548的博客
04-07 870
html之垂直外边距 一、兄弟元素的垂直相邻 首先写俩个div ，分别设置宽高均为100px，此时俩个div在垂直方向相邻。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> body{ margin: 0 auto; } .div
CSS外边距合并代码
09-25
- **清除浮动**：对于浮动元素引起的外边距问题，可以使用`clear:both`或`clearfix`类来阻止外边距合并。 - **使用`display`属性**：将元素的`display`属性设置为`inline-block`或`flex`等，可以改变元素的行为，...
解决margin 外边距合并问题
12-14
在网页布局设计中，CSS（层叠样式表）的margin外边距合并是一个常见的问题，尤其是在元素间的间距处理上。这种现象通常被称为“外边距塌陷”（Margin Collapsing），它涉及到相邻或嵌套元素的外边距计算方式。下面...
详解CSS外边距折叠引发的问题
01-19
第二种：父元素和子元素（或者最后一个元素）的外边距 第三种：空的块级元素的上下外边距 折叠的根本原因： margin之间直接接触，没有阻隔 折叠后外边距的计算： 1.如果两个外边距都是正值，折叠后的外边距取较大的...
Vue实现登录功能
最新发布
qq_47296476的博客
11-07 267
总体来说，这段代码主要负责处理用户登录成功后的一系列操作，包括权限控制、路由跳转、消息提示和加载状态管理。方法用于获取有当前用户权限标识的路由数组，并进行对原路由的替换。方法用于设置递归过滤有权限的路由到 Pinia 的 routesList 中，并缓存多级嵌套数组处理后的一维数组。方法中创建的加载状态元素包含了一组加载动画的 HTML 结构，通过设置不同的类名和样式来展示加载效果。方法中，将创建的加载状态元素插入到页面的顶部，显示加载状态。这些方法共同实现了前端控制路由的权限管理和动态路由添加的功能。
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 319
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 189
vxe-grid新增空行，并且定位到空行位置。
前端性能优化2
Cwhat的博客
11-06 520
常见问题：首屏速度，白屏时间等。操作速度以及渲染速度。一打开网页时白屏，是因为还需要从服务器那边请求HTML、JS这些过来，加载下来后才有东西渲染首屏速度参考两方面：白屏时间（资源加载时间、首屏js执行）、渲染页面（首屏数据请求、Dom渲染）渲染页面是比较快的，所以大多数时间是花在了白屏时间上，而其中的资源加载时间是占比比较大的。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 471
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
keep-alive - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
11-05 551
是 Vue.js 中非常有用的一个组件，特别适用于需要频繁切换的组件场景。通过缓存组件状态，它帮助开发者在提升性能的同时，保持良好的用户体验。在面试中能够清晰地解释keep-alive的使用场景和实现细节，将为你加分不少！希望这些知识能帮助你顺利应对相关问题，成功上岸！
css解决外边距塌陷
10-24
CSS中的外边距塌陷（Margin Collapse）是指两个相邻的块级元素，如果它们之间只有空白（比如行内元素、内边距或者没有内容），那么它们的上外边距和下外边距可能会合并在一起，导致实际间距小于预期。这种现象通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值