间距是几乎所有现代网络布局的基础。它通常由两个部分组成:padding(元素内部的空间)和margin(元素外部的空间)。
,我们将讨论如何调整填充和利润率不同的元素(一侧,在对立,甚至在各方面),我们将讨论如何使用汽车中心的东西,我们会讨论负利润率以及我们如何使用它来实现重叠的设计,最后,我们会将其绑定到一起,使关键注意当使用填充和保证金,同样重要的是,当不使用填充和保证金。我们会用经典的奥卡姆平方的例子。
让我们开始调整填充和边距。现在，我们将使用Webflow Designer来演示这个，但对于大部分内容，我们将打开CSS预览，这样如果你正在学习语法或手工编码你的布局，你就可以跟着学习。但这里有一张卡，如果我们想在图像开始前在卡内添加空间?我们只需点击并拖动添加填充。就是这样。我们在元素内部添加了填充。
现在，如果我们想点击这个数字?我们可以手动输入一个值并按回车键，也可以从任何预设值中进行选择。
但现在，让我们移动到margin，它是元素外部的空间。如果我们想在底部(在这个标题下面)增加空间?我们可以在底部加边距。
另外，注意这个类是如何应用于所有标题的。这意味着更改其中任何一个的样式都会影响应用该类的项目中的任何标题。
但是按钮呢?有时我们想要调整填充(我们想要在两边都增加空间)，但同时完美匹配两边有点乏味。
输入:对立。只需按住macOS上的Option或Windows上的Alt键，然后点击并拖动。同时调整两边。这对所有类型的元素都很有帮助-比如容器…或铱。(我们所有的内容都在一个容器中，在桌面和平板电脑上看起来很好)但是当我们进入移动领域时?它需要一些喘息的空间。所以。当容器被选中后，我们按住Option(或Alt)，然后点击并拖动来同时增加两边的空间。这将影响移动景观，当然，我们的变化级联到移动肖像。
所有方面呢?这里也是一样，只是当我们调整填充时要按住shift键(这些快捷键也可以用于空白)。
那中心呢?对于像容器这样水平居中的东西，一种常见的技术是使用自动边距。苹果这样做(他们使用自动边缘)，谷歌在两边都这样做，Figma -同样的交易…你会在网上看到这种技术。这里有一个空白页面的例子:我们有一个div块(只是一个空白的矩形)和里面的一堆东西。如果我们要水平移动?我们可以把左边的页边距设为自动，然后我们也可以把右边的页边距设为自动。现在是水平居中。
现在。我们每次都要手动把两边设为自动吗?有一个快捷方式-你可以按下这里的小按钮来设置两边为自动。
元素有不同的类型(某些布局类型;显示设置)如内联块(其中自动边距不会这样表现)，或内联(这里是相同的交易)，或显示none，显然，看起来什么都没有。
但是对于使用自动边界的元素，如何垂直对齐(顶部和底部的自动边界)呢?
规则是这样的:如果你想要水平居中的东西有一个定义好的宽度?你可以使用左右边距自动设置(就像我们刚才做的那样)。但是我们也可以使用flexbox这样的工具，它允许我们一次在父元素上设置规则(我们可以设置布局规则)。这开启了超级大国在所有不同方面的辩护和结盟。(这适用于单个元素;它适用于元素组。)
我们在Webflow大学有很多关于这个话题的教学，所以如果你想了解更多关于flexbox、CSS网格和量子场论的知识，请查看该网站。
但这是自动保证金。我们来讨论一下用负边界重叠的问题。看看这个:我们有一张图片……如果我们将图像的边距设为负值?它会在文档中向上移动(这也会打开页面上的其他东西)。这是有效的CSS和一个伟大的方式来实现重叠布局。
这些生物卡片也是一样。图像在卡片内部，但是如果我们将图像的边距设置为负值呢?我们可以把它拉出来，得到我们想要的效果。
现在。关于所有这些的最后一个注意事项(我们将用奥卡姆广场来覆盖它)。对于那些刚开始使用HTML和CSS的人来说，这是一个很常见的问题——我们应该使用padding和margin来定位所有内容吗?
答案是:可能不会。当然，填充是增加空间的好方法。但通常不应该用它来确定页面上所有内容的大小或位置。页边距也是一样，很多人可能会手动定位页面上的内容，并对所有内容使用填充和页边距。
输入:奥卡姆的广场。你知道这是奥卡姆的，因为屏幕上写着奥卡姆。很多人可能会做的是通过给主体添加填充，或者甚至(就像我们在这里做的)添加顶部和左边距，使它在视觉上居中。
这就是为什么这行不通的原因。如果我们的浏览器的宽度最终改变了(我们可以抓住边缘来模拟这个页面在更窄的显示器上的样子)?它仍然是相同的像素数量从顶部和左边，所以它不再居中。
这种响应性不高的设计的问题是响应性不高。在标题下方或按钮之间添加一些空间并没有什么错，从而在卡片设计的边界内创造出喘息的空间(这很棒)。但是一定要通过抓取画布的边缘并拖动来检查你的设计的流动性——这将模拟你的设计在所有宽度的设备上的响应。
如果你真的想把这样的东西居中呢?选择它的父元素(在我们的例子中，就是Body本身)。设置为弯曲。你可以使用flexbox来对齐和调整…正中靶心。如果你有两个呢?两个奥卡姆剃刀…年代?这时你就可以在中间添加一些空格(这是一个很好的margin的例子)。
所以。我们讲了很多。填充是元素边界内的空间;边缘是外面的空间。我们可以在macOS上按住Option键或在Windows上按住Alt键同时拖动来调整相反的边，如果我们想调整所有的边，也可以按住Shift键，我们通常可以在元素上使用自动边距使其在父元素中水平居中，如果我们想让它重叠，我们可以设置为负边距，我们可以在不同的设备宽度上测试我们的设计，以确保它们是流动的……和响应。
这就是关于网络空间的概述。
