margin和padding

文章目录

marginpadding是间距元素的两个最常用的属性。边距是某物外部的空间,而填充是某物内部的空间。

将CSS代码更改为h2以下内容:


h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}

这在辅助标题周围留有20像素宽度的空间,而标题本身因40像素宽度的填充而发胖。

元素的四个面也可以分别设置。margin-topmargin-rightmargin-bottommargin-leftpadding-toppadding-rightpadding-bottom并且padding-left是可以使用不言自明的性质。

盒子模型

边距,填充和边框都是所谓的Box模型的一部分。盒子模型的工作方式是这样的:在中间,您有内容区域(比如图像),周围有填充物,周围有边框,周围有边距。可以这样直观地表示:

Margin box

Border box

Padding box

Element box

您不必使用所有这些,但是记住框模型可以应用于页面上的每个元素会很有帮助,这是一件很强大的事情!

温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:3.136.236.178,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.lilianhua.com/margin-and-padding.html
Popup Image

通知

本站原则上是免费提供技术支持,但是服务器维护和运营成本高,可以实行自由赞助:赞助

Loading...