margin-bottom与bottom不同

最新推荐文章于 2024-04-29 20:58:38 发布
原创 最新推荐文章于 2024-04-29 20:58:38 发布 · 2.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文澄清了一个常见的误解：Margin并不是指元素与其他元素之间的距离，而是指元素边框外的空白区域。通过实例说明了如何设置Margin及它对元素显示效果的影响。

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

本人之前一直误以为margin就是指其所指元素与其上、下、左、右的元素的距离，其实并非如此。margin是指边框补白。也就是说，在现在所在元素边框的基础上，上下左右分别增加指定宽度的补白，举个例子，若元素本来的高度为10px，我设置了margin-bottom为2px，则该元素下边框增加了2px的补白，即元素的高度增加了2px，为12px
goodgirl1991
关注
CSS margin-bottom 属性
shengyin714959的博客
09-15 554
margin-bottom属性设置元素的下边距。负值是允许的。默认值：0继承：no版本：CSS1object。
小程序底部最后一个元素设置margin-bottom部分android机型不生效IOS可以
闫瑞锋的博客
08-10 681
解决办法统一设置 改成padding-bottom padding-bottom:
CSSbottom和margin-bottom的区别
qq_41746152的博客
09-17 3451
1.bottom是指元素与定位元素的距离，而margin-bottom是指同级元素之间的距离。 2.增加margin-bottom的长度，元素整体的高度也会相应增加，在border-box模式中会减少。
CSS中bottom与margin-bottom的区别
xiaoouh的博客
02-16 2041
bottom是与其包含块的距离，而margin-bottom是与同级的元素的距离
响应式布局页面css代码
小飞侠的博客
02-13 1580
/* ===============     照着老师视频敲的页面样式 ================*/ html{     font-size: 62.5%;     color:#222; } /*被选中的颜色*/ ::selection{     background-color: #b3d4fc;     text-shadow: none; } /*无序列表*/ ul{   ...
margin&border&padding的用法
qq_56785676的博客
04-29 2418
这一属性，可以设置盒子水平居中，设置上下外边距为0px，左右为auto，auto代表自适应，会自动将父标签剩余分空间均分到盒子左右两边。原因：子标签在设置margin-top时，会去找父标签的边界作为参考，找不到父标签的边界，就传递给父标签显示。当padding为四个值时表示盒子与盒子之间的间距的上，右，下，左间距。当margin为四个值时表示盒子与盒子之间的间距的上，右，下，左间距。当margin为三个值时表示盒子与盒子之间的间距的上，左右，下间距。边框至少需要设置两个值：宽度和类型，颜色默认为黑色。
【前端】【html/css】前端学习之路（九）：盒子模型（二）（CSS重点）（margin/阴影/圆角）
SuiKaSan的自学室
07-02 869
1.外边距（margin）margin属性用于设置外边距，也就是设置盒子之间的距离。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。    margin-top:上外边距    margin-right:右外边距    margin-bottom:下外边距    margin-left:上外边距    margin:上外边距 右外边距 下外边距 左外边取值顺序跟内边距相...
10_盒子模型-margin-bottom传递(了解).html
10-09
margin-bottom的传递是盒子模型中的一个特殊行为，通常在文档流中，块级元素的margin-bottom会影响到其相邻的块级元素。具体来说，当一个块级元素的margin-bottom与其下面的块级元素的margin-top相遇时，这两个外边...
如何避免`padding-bottom`被`margin-bottom`覆盖？
11-24
3. **限制负`margin-bottom`**：如果你的代码中有负`margin-bottom`，试着找出它并替换为正值，或者将其与其他样式合并以减少意外效果。 4. **使用`calc()`计算`padding-bottom`**：如果`margin-bottom`是动态的，...
margin-bottom 不起作用
03-16
可能是由于以下原因导致 margin-bottom 不起作用： 1. 父元素的高度不够，导致子元素的 margin-bottom 被截断了。 2. 子元素的 display 属性为 inline 或者 inline-block，这时候 margin-bottom 不会生效。 3. 子...
em与rem的差异，  margin垂直布局与水平布局的差异
BearMX的专栏
03-01 1253
1、HTML长度单位之em与rem em与rem都是相对长度单位： em是相对于当前元素的字体大小font-size的长度; <div style="font-size:12px"> <div style="font-size:36px;margin:3em"> 此处的margin:3em 具体的长度换算出的结果就是 108p...
swift5的SnipKit框架使用
A1521315qwss的博客
11-23 1067
swift5的SnipKit框架使用 swfit的SnipKit跟OC的Masonry类似，都是给控件添加约束的 加入 pod ‘SnapKit’, ‘~> 5.0.1’。 最新版本5.0.1。网上其他写法都是过期的API写法，没有参考意义，或者报一大堆警告，令开发者很是头疼。 2个Label距离最顶部显示。实践表明，必须设置frame的宽高，XY设置成0，让SnapKit约束自动归位。且宽高被约束好，大小正好是文字的大小。 案例代码。 必须导入框架 import SnapKit import UIK
重新认识margin-top和margin-bottom
热门推荐
gaohuanjie的专栏
11-18 1万+
重新认识margin-top和margin-bottom
使用padding-bottom和margin-bottom实现两栏等高布局原理
落日夕霞的博客
11-28 3997
声明：以下均为个人见解，若有错误请指出。 效果预览： <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"&am
iOS 仿拉钩首页效果
ForeverMyheart的博客
05-18 541
工作之余写了一个类似拉钩首页demo，主要代码如下： class LagouHomeController: UIViewController { var topView = BannerView() var toolView = ToolView() var bgView = UIView() var datas = [ApplyListModel]() var tableView = UITableView() overri...
在CSS中top、left、right和bottom属性设置无效果
drawlessonsfrom的博客
03-26 2394
top、left、right和bottom属性设置没有作用的原因 position属性一般配合top、buttom、left和right来使用。元素只有在定义position属性（除了static）之后，top、buttom、left和right才有效。 注意：position属性的值为static时，设置top、buttom、left和right属性时不会产生任何效果。同时position的默认属性为static，即在不设置position属性的情况下，position的值为static。 ...
【详解marginTop与marginBottom】
weixin_33701564的博客
11-07 1872
layout_marginTop，layout_marginBottom，layout_marginRight，layout_marginLeft 是 RelativeLayout 中的四种属性，今天在进行UI设计的时候，着实困扰了好久，索性做个总结。 先上结论： layout_marginTop 指定该属性所在控件距上部最近控件的最小值； layout_marginBottom...
python snap7 简书_SnapKit真好用
weixin_39935777的博客
12-17 222
阿里云2.1.0版本的UI都是基于Storyboard完成的，第一次用Storyboard，感觉很新鲜很好用，到后面真的是深陷泥潭。我把所有的Storyboard都写在Main.Storyboard文件中，现在我已经不想打开这个文件了，因为会很卡，并且位置稍微移动，就会产生变化，对于多人协作是一个问题。另外一个就是没法定义标准视觉库，字体大小和颜色什么的，都没法使用自定义的值。2.2.0版本新来了...
《岳阳楼记》
u014677136的专栏
04-15 567
庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。  予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也。前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？  若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐耀，山岳潜形；商旅不行，樯倾楫摧；薄
margin-bottom和padding-bottom
最新发布
01-28
### CSS `margin-bottom` 和 `padding-bottom` 的区别及用法 #### 定义与作用域 - **Margin-Bottom**: 属性定义了一个元素与其下方相邻元素之间的外部空间大小。此属性不会影响元素自身的尺寸，仅改变其与其他元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值