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