[CSS]指定利润率,如何使用填充和边距和角色

它易于使用,行为也旨在知道“以某种方式”是“填充属性”和“裕度属性”。但是,如果你设计更强大,你迷路了吗?

“如果据说由”边距“计算,我认为这么多,我还没有设计一个网站。”
“宽度宽度是距离,距离是距离,填充或边距的地方?”

有这种印象的人应该在里面。 “填充”和“边际”是最常用的,最常使用的是对现场设计产生重大影响(特别是宽度设置)。如果这可能是一个很好的理解,您可以精美地制作网站。在这里,我们将专注于您想要了解的“填充”和“保证金”的概念。本文是初学者的一篇文章,您可能会感到足够好,无法阅读有经验的人。

[对于初学者]仔细解释如何编写CSS(样式表)

填充/保证金角色

让我们了解元素!

在描述“填充”和“边缘”之前,让我们知道这个词“元素”看起来很多次。元素是指向从起始标签到结束标记的丛集的单词。在HTML中,您可以使用适合页面配置的角色的顶部和下按标记,并从上面写入代码,但我们正在制作许多元素。和“填充”和“边际”用于该元素以外的“边距”设置。

填充角色

“填充”是一个CSS属性,可在边界内部或内部设置边缘。事实上,让我们做一个边缘。以下是HTML代码和CSS。 CSS对P标签具有边框属性,以便易于理解。

<div class="sample">
  <p>これはサンプルです。</p>
</div>
p{
 border: 1px solid blue;
}

以下是显示结果。

在“验证”中确认时,字符部分是“蓝色”,“边距”的橙色被“蓝色”包围。有些人认为“16”在尚未设置“边距”时设置了“16”,但这是浏览器未经许可未经许可设置余量的功能。那是。一旦你想忽略它。

嗯,人物与“边框”之间没有当前余量。您不应该在公共网站上看到这些情况。按钮,菜单栏,侧边栏,邮政编码,任何地方,字母和边界之间存在边缘(边框),应易于看。换句话说,几乎需要填充的设置。设置如下“填充”。

p{
 border: 1px solid blue;
 padding: 10px;
}

在字母和边界之间设置了余量。您将能够将字符驻地或根据需要指定宽度。

您还可以检查验证工具中的设置。 “蓝色”是角色的一部分,“绿色”是填充部分。

以这种方式,它是“填充”的作用,使字符内的字符内的边缘从元素内部制作。

保证金角色

“边缘”是一个CSS属性,可以在边界以外设置边缘。让我们制作利润率以及填充。我们将制作另一个“P标签”以使其容易理解。

<div class="sample">
  <p>これはサンプル1です。</p>
  <p>これはサンプル2です。</p>
</div>
p{
 border: 1px solid blue;
 padding: 10px;
}

上述设置显示如下:边界不在边界之外设置。

因此,使用“边缘”在元素外设置边距。它设置为“20px”,使其容易理解。

p{
 border: 1px solid blue;
 padding: 10px;
 margin: 20px;
}

可以看出,元素已被删除如下。

如果使用验证工具检查,您当然可以看到“边缘”设置为“边框”外部的“20px”。

填充和边距与人类相当

这是一个有趣的故事,但与人类相比,让我们看看这两个人。皮肤是骨骼是元素的部分的边界。没有人不吃任何东西,所以你需要一部分肉的肉,让“填充”保持健康的身体。即使它太薄,如果它太胖了,不可能使其美丽。 “边缘”是人和人对齐的距离?如果有一个往复距离,则对齐状态是美观的。

实际上,您可能无法设置击中皮肤的边界。

如何使用填充/边缘的基础知识

价值

介绍如何设置填充和边距值。有多种设置方法,但填充和边距设置很常见。可以设置设置方法,向下,向左和右键进行元素。

设置方法 描述
共同环境 当设置相同的距离,向下,向左和向右设置时,它是一个设置方法。

  • 填充:10px(上下,左右);
  • 边缘:10px(上,向下,左右);
上下,左右设置 当上下和下部是相同的距离时,它是一个设置方法,左右左右是相同的距离。

  • 填充:10px(上下)20px(左右);
  • 边缘:10px(上下)20px(左右);
以上,左右,较低 上部和较低值是不同的,但是当左右左右是相同的值时,它是一个设置方法。

  • 填充:10px(顶部)20px(左右)30px(底部);
  • 边缘:10px(顶部)20px(左右)30px(底部);
上面,右,底部,左 在四个方向上取出不同的值时,它是一个设置方法。设置顺时针→右侧→底部→按顺序左侧。

  • 填充:10px(顶部)20px(右)30px(底部)40px(左);
  • 边缘:10px(顶部)20px(右)30px(底部)40px(左);

简单的写作应该尽可能地需要。例如,例如,“填充/边缘:10px 10px 10px 10px:”不智能,例如“padding / ramgin:10px 10px 10px 10px:”宽度为10px。此外,如所知道的,“(逗号)”不在值与值之间进入。

PX规范和%规格

“PX规范”是绝对值,它与任何屏幕保持相同的距离。如果要从多个终端访问,这可能是一个糟糕的便利性。此时,该值可以由“%”指定。据说它是为任何东西指定的“%”,但这是一个指定为“父元素”。

<div class="sample">
  <p>これはサンプルです。</p>
</div>

例如,一旦指定“宽度:500px;”在父元素中,如下所示:这是参考数值。如果p元素是子元素,则此处的值由“%”指定,则父元素“500px”的百分比是。

.sample{
  width: 500px;
}

p{
 border: 1px solid blue;
 width: 80%;
 padding:  10px 5%;
 margin: 5%;
}

即,在上面的例子中,“宽度:80%;”=“宽度:400px;”,“填充:10px 5%;”=“填充:10px 25px;”,“边缘:5%;”=“余量:25px 25px;“它会相同。在下图中,添加水平宽度的宽度。它将总共502px。

好吧,有些人可能认为它不是500px,包括“​​边境”的价值。但是,设置“边框”时的值不包括在计算中。在这里,一些错误出来了。所以,“边界”也“%”,或者也是一个错误。它是因为“边框”值不能由“%”指定。让我们添加“盒子尺寸:边框盒;”在这里的CSS。

.sample{
  width: 500px;
}

p{
 border: 1px solid blue;
 width: 80%;
 padding:  10px 5%;
 margin: 5%;
  box-sizing: border-box;
}

然后,它将是总“500px”,包括边框的宽度。因此,根据父元素的宽度来执行自动调整,但是当检查以下时,可以看出内容部分的宽度低。

很容易总结。正如您在上面的示例中看到的,以下是以下内容。
1如果指定的数字是父元素的宽度,则计算宽度。因此,它通常与“宽度”规范一起使用。
2由于总宽度是父元素宽度,因此将使用一半完成设置。
3)“盒子尺寸:边界盒;”在水平宽度的宽度方面方便,包括“边框”的大小。

落孔为边缘设置

指定宽度/高度

嗯,让我们改变“填充”和“边缘”的故事,并改变“宽度”和“高度”的故事。这些通常同时设置,有时“宽度”和“高度”长度较长,包括“填充”或包括“边距”或初学者可能会丢失。

首先,让我们检查一个试验的以下属性的行为。

p{
 width: 400px;
 height: 50px;
 padding:  10px 25px;
 margin:  25px;
}

正如您所看到的,“宽度”和“高度”在所谓的“内容元素”部分中指定。也就是说,如果“P标签”,“填充”也不包括在其字符元素部分中的“填充”。因此,当设置宽度和高度时,将“填充”或“余量”值添加到“宽度”或“高度”的值并计算。

边缘上下抵消

只删除“边缘”并考虑。一种复杂对“边缘”的理解的元素是“偏移边缘”的问题。这是一个“保证金”在“填充”中不会发生的特定问题。让我们记住以下趋势。

  • 垂直相邻的元素的裕度适用更大的边距。
  • 侧边的边缘是元素的余量,并应用设定值。

好吧,让我们马上试试。

<div class="sample">
   <p class="margin_1">これはサンプル1です。</p>
   <p class="margin_2">これはサンプル2です。</p>
</div>
.margin_1{
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid red;
}

.margin_2{
  padding: 10px;
  margin-top: 50px;
  border: 1px solid blue;
}

它如下所示:

现在让我们使用验证工具来检查“余量”值。 “Margin-Top:50px;”在专注于P元素的类名“Margin_2”时是在这种情况下元素之间的宽度。换句话说,“边缘底:20px;”无效。这是“偏移边缘”。

保证金具有“自动”的价值。

如果您使用“边缘”,我认为有机会使用价值“自动”而无论值如何。 “Auto”发挥了自动调整宽度的作用,并且在放置元件时经常使用。例如,这是如下所做的。

<div class="sample">
  <div class="margin">これはサンプルです。</div>
</div>
margin{
  padding: 10px;
  margin: 0 auto;
  width: 400px;
  border: 1px solid blue;
}

请参阅以下结果。您可以看到边距的宽度相等。设置“宽度”后,您可以根据宽度自动设置宽度。

“边缘:0 auto;”是一个喜欢的代码,但“0”的一部分可能会改变。让我们将上下指定为“20px”如下。

margin{
  padding: 10px;
  margin: 20px auto;
  width: 400px;
  border: 1px solid blue;
}

你可以看到边缘上下。

“边缘:0 auto;”具有集中的元素的效果,但效果与“左边:自动;”,“边缘 - 右:自动”相同。

.margin{
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  border: 1px solid blue;
}

图像中央排列

存在一个问题,这是一个让她训练有素的第一次的问题,并且存在图像的中心位置。这也可以使用“边缘”和“自动”来实现。例如,假设您有以下HTML代码:

<div class="margin">
  <img src="./img/sample_img_1.JPG" alt="" width="300">
</div>
.margin{
	width: 500px;
	border: 1px solid blue;
}

此代码将显示如下:

但是,设置CSS如下:

.margin{
	width: 500px;
	border: 1px solid blue;
}
.margin img{
	display: block;
	margin: 10px auto;
}

也就是说,阻塞图像被设置为上下边缘,“自动”设置为左侧和右侧,以实现余量的中心对齐。然后,已经实现了图像的中心对准。

概括

对于那些处理HTML的人来说,毫无疑问地说,没有通过填充和边距,没有使用它的网站。一定要提出以下几点。

  • 填充是在边界和内容元素之间设置边距的属性。
  • 保证金是一个在边界和内容元素之外设置边缘的财产。
  • 有几种方法可以设置填充和边缘值设置,但旨在实现简单的写入方法。
  • 设置上下保证金时要小心。余量之间取消。这不会发生在填充中。
  • 如果要将元素驻留,则可能有用“自动”具有边距值。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。