margin-bottom与bottom不同

最新推荐文章于 2023-10-09 17:40:43 发布
最新推荐文章于 2023-10-09 17:40:43 发布
阅读量2.2k 收藏 5
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodgirl1991/article/details/50299343
版权
本人之前一直误以为margin就是指其所指元素与其上、下、左、右的元素的距离，其实并非如此。margin是指边框补白。也就是说，在现在所在元素边框的基础上，上下左右分别增加指定宽度的补白，举个例子，若元素本来的高度为10px，我设置了margin-bottom为2px，则该元素下边框增加了2px的补白，即元素的高度增加了2px，为12px
goodgirl1991
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSSbottom和margin-bottom的区别
qq_41746152的博客
09-17 3272
1.bottom是指元素与定位元素的距离，而margin-bottom是指同级元素之间的距离。 2.增加margin-bottom的长度，元素整体的高度也会相应增加，在border-box模式中会减少。
CSS中bottom与margin-bottom的区别
xiaoouh的博客
02-16 1921
bottom是与其包含块的距离，而margin-bottom是与同级的元素的距离
css外边距塌陷（合并）
lxllxl211的博客
10-19 300
2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与mtop之和。1.当上下相邻的二个块元素相遇时，如果上面的元素有下外边距margin-buttom。3.取二者值中的较大者的这种现象称之为相邻块元素垂直外边距的合并。1、对于二个嵌套关系的块元素，如果父元素没有上内边距或边框。3、可以给父元素添加overflow：hidden；2、父元素的上外边距会与子元素的上外边距发生合并。[1]相邻块元素垂直外边距的合并。【2】嵌套块元素垂直外边距的合并。
Bootstrap 5-实用工具-外边距(margin)
最新发布
m0_73839298的博客
10-09 1057
（margin-left，margin-right:左侧和右侧的外边距）（margin-top，margin-buttom:顶部和底部的外边距）（margin-buttom:底部的外边距）（margin-right:右侧的外边距）（margin-left:左侧的外边距）（margin-top:顶部的外边距）
初学者对vue的学习使用 关于margin和padding的了解使用
qq_43393995的博客
05-13 8589
大佬连接跳转margin和padding的区别是什么-css教程-PHP中文网 margin和padding margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离；即外边距。 padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离；即内边距。 margin和padding的区别 margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。 （margin是用来隔开元素与元素的间距；padding是用来隔开元素
vue div 上下左右间距设置
热门推荐
小懒魔王的博客
12-08 1万+
<div style="margin-top:10px;"> <span>1111</span> </div> 利用div 中的style="margin-top:**px;" *********注意 px的后面有; 同理，可用margin-left margin-righe margin-bottom 分别表示左、右、下三个方位 ...
margin-left和right失效(斯芬克斯)之谜
01-24
一种情况是元素的确不支持margin-top/bottom(参看：关于margin-top/bottom在inline元素（non-Replaced）上不起作用的解释); 另一种情况则是元素产生了margin叠加（参看：如何避开麻烦的margin叠加(margin collapsing...
各浏览器padding、margin的差异
10-31
各浏览器padding、margin的差异
postcss-margin-helpers:PostCSS的保证金助手
05-05
postcss-margin-helpers 保证金助手。安装$ npm install postcss-margin-helpers [--...' ,' margin-bottom: 40px;' ,'}'] . join ( '' ) ) . first ;margin . top ( rule ) ; // 5pxmargin . right ( rule ) ; // 10px
Class与ID区别 margin和padding区别 CSS学习笔记
10-30
margin和padding都是CSS中的盒模型属性，它们都是用来控制元素的外观和布局的，但是它们的作用域不同。 margin属性是用来设置元素的外边距的，它包括margin-top、margin-right、margin-bottom和margin-left四个方向...
仿新浪微博首页大家正在说渐入轮显效果
12-10
margin-bottom:20px;} h4{border-bottom:1px solid #eee;} 1、吃早餐都中毒了 是不是有点全都，吃早餐竟然食物中毒啊？ 2分钟前 2、30城市房价增高进7成 房奴注定当今社会的年青人会很忙碌，一辈
绝对定位与margin-bottom
cristina_song的博客
08-09 1374
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;utf-8&amp;amp;quot;&amp;amp;amp;gt; &
html5中margin是什么意思,css中margin是什么意思，margin作用是什么？
weixin_28814457的博客
06-22 1万+
一、介绍，什么意思？margin为对象外边距间隔属性。如果对一个对象比如div设置了边框后，再设置margin就会观察到这个div外面产生了间距边距。margin作用：设置对象与其它对象的外边距离，外边间隔。比如对象与对象，上下DIV，左右DIV间隔多少，可以使用margin实现。.css5{margin:10px}设置html中class=css5对象的外边距(包括上、左、下、右)分别为10px...
重新认识margin-top和margin-bottom
gaohuanjie的专栏
11-18 1万+
重新认识margin-top和margin-bottom
使用padding-bottom和margin-bottom实现两栏等高布局原理
落日夕霞的博客
11-28 3870
声明：以下均为个人见解，若有错误请指出。 效果预览： &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;demo&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&am
移动端开发底部元素margin-bottom失效解决办法
往后橘生
01-02 1万+
移动端开发底部元素margin-bottom失效解决办法
详述外边距样式属性(margin-top margin-right margin-bottom margin-left margin)
IT_Helianthus的博客
05-20 7813
文章目录一、margin-top样式属性二、margin-right样式属性三、margin-bottom样式属性四、margin-left样式属性五、margin样式属性 一、margin-top样式属性 设置元素的上外边距，该属性有多个值： 值 描述 auto 浏览器设置的上外边距。 length 定义固定的上外边距。默认值是 0。允许使用负值。 % 定义基于父对象总高...
margin-bottom在safari浏览器失效的问题
阿尔叭叭
03-28 3132
今天遇到一个bug是底部明明有margin-bottom却无法作用，排查了一下改成用padding可以有效但不找出原因是无法完成这篇博客的问题概要描述：在safari中，当内容高度超出所有父容器时，内容的margin-bottom设置是无效的。解决这个问题的办法也很简单，只要规避这种超出所有父容器的内容即可。父容器不设置高度即可。另外尽量少用html, body {height: 100%;}这种...
css-margin collapse外边距折叠
王欢的博客
07-13 3369
1.多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠折叠的结果：两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。折叠的产生情况：1.必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。2.没有线盒，没有空隙（clearance，下
margin-bottom
08-18
`margin-bottom` 是 CSS 中用于设置元素底部外边距的属性。 通过设置 `margin-bottom`，可以控制一个元素与其下方元素之间的垂直间距。 以下是一些常见的 `margin-bottom` 的使用示例： 1. 设置固定数值的外边距： ```css .example { margin-bottom: 20px; } ``` 上述代码将给具有 `example` 类的元素设置 20 像素的底部外边距。 2. 使用百分比值设置外边距： ```css .example { margin-bottom: 10%; } ``` 上述代码将给具有 `example` 类的元素设置相对于其父元素高度 10% 的底部外边距。 3. 使用负值设置外边距： ```css .example { margin-bottom: -10px; } ``` 上述代码将给具有 `example` 类的元素设置 -10 像素的底部外边距。这将使得元素向上偏移，与其下方的元素产生重叠。 请注意，`margin-bottom` 属性还可以接受其他单位值（如 em、rem、vh 等），并且可以与其他定位属性（如 `position`、`float`）结合使用来控制元素的布局。 希望以上内容能够帮助到你。如果你有任何进一步的问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值