在这个关于CSS和HTML中的边距和内边距的入门教程中,我们将探索一些易于使用的创造性应用程序,进一步增强你在元素周围添加空间的能力。您可能想要在图像周围添加空格,或者在网页边框和正在显示的文本之间扩展空格。

此外,我们将探讨不同级别的间距,并真正了解CSS中边缘和填充之间的差异。在此领域内,我们还将探索许多自定义选项,您必须使用精确测量设置边距和填充。

边距和填充之间的区别

利润率

边缘控制网页边缘和元素本身之间的间距宽度。

以下是四个属性选项:

  • 边缘
  • 边缘右边
  • 边缘底部
  • 边缘左边

保证金语法选项是:

  • 边缘 - 顶部:<长度> |<百分比>
  • 边缘 - 右:<长度> |<百分比>
  • margin-bottom: <长度> | <百分比>
  • 边缘左:<长度> |<百分比>

填充

填充控制在元素周围的区域。

以下是四种属性选项:

  • 填充顶部
  • padding-right
  • 填充底部
  • 填充填充

填充语法选项是:

  • padding-top: <长度> | <百分比>
  • padding-right: |
  • padding-bottom: <长度> | <百分比>
  • 填充左:<长度> |<百分比>

为了更好地理解元素周围的内边距和边距的准确位置,我们可以考虑框图。

利润率在外面。想想你在一张纸上使用的边缘。这些边缘远离纸张边缘。在HTML边缘中的工作方式与页面边缘的空间相同。

边界只需封装元素。边框可以立即包围元素,或者如果对元素应用了更多的填充,它可能会远离元素。

填充提供元素周围的空间。想想在冬天穿着较重的夹克。夹克越厚,你周围的衬垫越多。在这种情况下,在这种情况下,是元素。

定义边距和填充

使用像素中的数值

我们如何计算像素?显示分辨率表示屏幕中包含多少像素。例如,1080×1920显示只是一个1080像素高、1920像素宽的网格。在你的网页上。当我们进入添加像素尺寸,你会想玩不同的数值来调整结果,以适应你的需要。

在以下代码中图像属性,我们设置了:

  • 图像的宽度到300px.
  • 边境到2px.
  • 填充到0px.
  • 利润到0px.

web输出如下所示:

如果我们增加填充,我们会看到边框离图像更远,因为padding属性是第一个包装元素的。

以前的文章
SQL ALTER - 改变主意
下一篇文章
CSS背景速记教程