margin-bottom

简而言之，Marginbottom 是控制网页元素下方空间的好方法。
说白了，就是调整与元素底部的距离，让页面更舒服。
1 . 意思是低处。
应该使用什么值？只要你想要，像素和 em 都可以。
2 、是否希望底部区域与父元素的宽度成比例？使用 2 0% 的百分比，父元素的宽度为 2 0%。
3 .修复它，布局就会改变。
如果你想让元素之间的空间更大，你可以把它调大，如果你想让元素之间的空间更小，你可以把它调小。
4 .与其他下部空间控件配合使用，布局更加灵活。

亲眼看看，使用marginbottom，您可以轻松地进行网站布局。

html的margin属性

说白了，边距在 HTML 元素周围添加了一个“空圆圈”，但应谨慎使用。

首先让我告诉你最重要的事情。
页边距可以同时设置为上、右、下、左页边距。
别把顺序搞乱了。
这就像同时在房子的四个侧面建造墙壁，先是顶部，然后是右侧，然后是底部，然后是左侧。
去年做电商项目的时候，我用margin在产品卡片上留了统一的1 5 px，直接节省了我1 00行代码。
另外需要注意的是，如果您只想更改左边距（例如使用 margin-left: 5 px），则其他三边将默认为 0，这特别有利于快速调试。
还有另一个重要的细节。
在表格元素上使用边距看起来会很难看，因为表格有内置边框。
去年我修改表格边距的时候差点被同事骂了，后来我意识到我得先把边框去掉。
说实话，我很困惑。

一开始我以为margin和padding是一样的，如果我改变它，效果会立即出现。
但后来发现不对，只能等待浏览器重排。
等等，还有一件事。
负边距值可能会导致元素“弹出”，但使用太多会使事情看起来很混乱。
大约3 000例基本禁用。

我们建议使用 Margin 和 Flex 布局。
新项目现在默认执行此操作。

怎样在HTML中设置页面边距？ 页面边距调整指南

说白了，HTML中设置页边距的本质就是通过CSS margin属性来控制。
它实际上非常简单，通常适用于 <body> 元素或容器元素。
我们先来说说最重要的事情。
均匀调整各个方向的边距。
可以使用margin快捷属性，例如这样设置：body{margin:2 0px;}，这样上、右、下、左都是2 0像素。
还有一点，如果想单独设置各个方向的边距，可以独立使用属性，如：body{margin-top:1 0px;margin-right:1 5 px;margin-bottom:2 0px;margin-left:2 5 px;}。

我一开始以为只有四个方向值，但实际上margin可以接受1 -4 个值，顺序是上、右、下、左。
例如margin有两个值：1 0px 2 0px；意思是上下1 0个像素，左右2 0个像素； margin的三个值：1 0px 2 0px 3 0px；这意味着顶部 1 0 个像素，左右 2 0 个像素，底部 3 0 个像素； margin的四个值：1 0px 2 0px 3 0px 4 0px；这意味着顶部 1 0 个像素，右侧 2 0 个像素，底部 3 0 个像素，左侧 4 0 个像素。

等一下，还有一些东西可以区分边距和填充。
Margin控制元素的外部空间，例如它与其他元素的距离；而内边距控制元素内容和边框的内部空间。
错误示例：使用padding调整元素间距会导致布局混乱。

最后，提醒一下，避免合并边距很容易陷入陷阱。
相邻边距将垂直合并（取较大值）。
解决方案可能是使用内边距而不是边距、添加边框或使用 Flexbox/Grid 布局。

对于响应式设计，使用 rem、% 或 vw/vh 等相对单位会更方便标准化基线并适应不同设备。
例如，您可以设置如下：margin:1 rem;或者左边距：5 %；。
同时，通过媒体查询来适配不同设备也很重要，如：.container{margin:2 0px auto;max-width:9 6 0px;}@media(max-width:7 6 8 px){.container{margin:1 0px 2 vw;}}@media(max-width:4 8 0px){.container{margin:5 px 1 0px;}}。

现代布局替代方案，例如 Flexbox 和网格间隙属性，也可以替代传统的边距来管理子元素间距。
因此，我认为值得尝试这些方法来实现跨设备的一致页边距。