前端外边距（margin）的问题

最新推荐文章于 2023-02-23 19:34:11 发布
原创 最新推荐文章于 2023-02-23 19:34:11 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了CSS中关于外边距（margin）的几个重要特性，包括外边距叠压现象、子元素对外父元素的影响、以及如何通过设置左右外边距实现元素的居中。文章指出，在某些情况下使用内边距（padding）可能是更好的选择。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.上下外边距会叠压

2.父子级包含的时候，子级的margin-top会传递给父级。

3.设置  margin-left:auto 时，此时 元素会紧紧的靠在 右侧

4.设置  margin-right:auto 时，此时 元素会紧紧的靠在 左侧

5.综合3.4两点  当同时设置   margin-left:auto； margin-right:auto 时，元素会紧紧的位于父类元素的正中间 


总结：

     外边距存在很多问题，建议用内边距（padding）替代外边距

外边距margin合并问题
line233的博客
05-12 303
第一种情况：相邻元素垂直外边距合并问题 <div class="div1"> </div> <div class="div2"> </div> 现在有两个垂直排列的盒子，我们设置了上边盒子的下外边距为100px，下边盒子的上外边距为50px，想要实现两个盒子的垂直边距为150px，但实际上两个盒子垂直方向上的外边距发生了重合，实际边距取了两者m...
15-鸿蒙开发中的元素布局：内边距padding、外边距margin和边框border
最新发布
LCFliu的博客
11-08 2688
内边距（Padding）：内边距是指元素内容与其边框之间的距离。通过设置内边距，可以增加元素内部的空间，使其看起来更加舒适。外边距（Margin）：外边距是指元素与其周围元素之间的距离。通过设置外边距，可以调整元素之间的间距，避免元素之间过于拥挤。边框（Border）：边框是指围绕元素内容的线条。通过设置边框，可以增强元素的视觉效果，使其更加突出。通过本文，你已经学会了如何在鸿蒙开发中使用内边距、外边距和边框来精确控制元素的位置和外观。这些布局属性对于创建美观且功能强大的用户界面非常重要。
转载：margin外边距合并问题以及解决方式
weixin_34090562的博客
05-23 174
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
Margin的垂直外边距问题
weixin_30855099的博客
08-02 128
做练习的时候遇到一个margin的问题，代码结构如下，给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素，结果却是子元素div和父元素body一样高，并且距离<html>上边距50px,如下图（a）： <!doctype html> <html> <head> &l...
margin外边距
yijun9588的博客
02-19 480
margin外边距：盒子以外要空出的距离，有多个盒子时相当于盒子与盒子的间距 ☆ 1.margin的上下外边距会重叠（上面盒子的margin-bottom和下面盒子的margin-top发生重叠） 2.子级的margin-top会传递给父级（给父级加上边框则问题解决） 设置100×100的容器 width:100px; height:100px; background-color:pink; 设...
margin外边距问题
weixin_30606461的博客
08-01 135
1 、上下边距会叠加 !DOCTYPE html> <html> <head> <m<etacharset="UTF-8"> <title></title> <style> .box1{ width:500px; height:300px; background: blue; ma...
如何解决外边距margin叠加的问题探讨
09-22
在CSS布局中，经常会遇到块级元素垂直外边距（margin）发生叠加的问题，这通常称为margin叠加或外边距折叠。当两个或多个毗邻的块级元素垂直方向上的margin相遇时，它们会以较大者的margin值作为一个统一的margin值...
08_盒子模型-外边距-margin.html
10-09
外边距有四个方向：上、右、下、左，分别对应于“margin-top”，“margin-right”，“margin-bottom”和“margin-left”四个CSS属性。当只使用一个值时，这个值会应用到所有方向的外边距；两个值则分别应用于上下和...
常用技巧margin负外边距的使用介绍
09-25
CSS中的负边距（negative margin）是一种强大的...理解和熟练运用负边距对于前端开发者来说至关重要，它可以帮助构建更加灵活和响应式的网页设计。在实践中，应谨慎使用负边距，确保其不会导致布局混乱或破坏可读性。
margin外边距合并问题
Oranq的博客
03-03 1166
margin属性： 所有浏览器都支持 margin 属性。这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度，也可以分别设置个边的外边距。margin是一个复合属性，包括：margin-top、margin-bottom、margin-left、margin-right    基本使用： 例如：margin：10px 20px 40px 30px;----表示：上/右/下/
css 外边距常见问题解决
qq_40301211的博客
03-16 1773
1.外边距塌陷 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom， 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 解决方案：避免就好 2.嵌套块元素垂直外边距的合并 对于两个嵌套关系的块元素，如果父元...
外边距问题及解决方法
m0_74899723的博客
02-23 90
2.如果父元素也有margin-top值，会与子元素的margin-top值合并，取两者较大值；现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'1.元素嵌套关系，子元素的margin-top值会叠加给父元素；原因：并列关系的两个元素共用了一个外间距区域。2.为父元素设置overflo：hidden；父元素和子元素公用一个上外边距区域。1、兄弟关系外间距塌陷问题。兄弟关系外间距塌陷问题。
“margin”外边距的各种奇特现象
老司机的后备箱
12-20 676
总的来说，我们在使用margin的时候还是要时刻注意一下这四种现象，特别是块级嵌套元素的塌陷现象,在我们使用margin来进行页面布局的时候很容易就出现塌陷现象，因此我们推荐在给父子元素之间设置距离的时候，最好使用padding，在兄弟元素之间设置距离的时候再使用margin，这样就能有效避免上述所出现的问题。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
css之负外边距
qq_33745501的博客
07-15 1531
负外边距
CSS 负外边距
dreament的专栏
07-15 883
CSS margin负外边距总结 （1）、外边距叠加   、对于水平相邻的元素，它们之间的水平间距为两个元素的外边距叠加,即margin-right + margin-left。   、对于上下紧挨着的元素，它们之间的垂直间距为两个元素中外边距最大的那个，即max{margin-bottom，margin-top}。     注：margin-bottom，margin-right是上边的
前端边距-反爬遇到的前端知识必知
nioii-七仔
02-28 579
边距问题可以参考：HTML边距设置之padding和margin css字体颜色，下面是对p标签使用： <style type="text/css"> /*p标签样式*/ p { text-align: center; /*居中*/ padding-top:20px; /*距离顶部300px*/ font-size: 10...
前端学习day004：外边距内边距边框；元素居中设置；定位；盒模型
qq_45926448的博客
06-09 253
外边距内边距边框；元素居中设置；定位；盒模型
WEB前端，混合排版，有的宽有的窄，滚动会出现空白处，怎么办。
aoe41606的博客
02-11 124
多数时候出现空白都是由于有滚动栏滚到一边就会产生空白。 overflow-x: hidden; 在最大图的那个div里写这句。 转载于:https://www.cnblogs.com/zhch...
前端开发 margin外边距 0229
pyhui的技术博客
02-29 277
目标效果分析图 图例分上下两个盒子 下面的盒子里又放三个图文容器 容器间有间距 盒子模型 边距的效果 没有边距的情况 要让图片分开，给加上边距就可 加上以后的效果 开始代码 浮动并且加边距 让图片内容水平居中 给浮动的内容添加外容器 让外容器水平居中 margin外边距的使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值