在 HTML 中,padding 和 margin 是用于控制元素布局和间距的重要属性。
一、Padding(内边距)
-
定义:Padding 是指元素内容与元素边框之间的距离。它可以在元素内部创造出空白区域,使得内容不会紧贴着边框。
-
作用
-
增加元素内部的空间,使内容不显得过于拥挤。
-
可以用来突出元素的重要性或增加视觉层次感。
-
-
语法
-
使用 CSS 来设置 padding 属性,可以分别设置上、右、下、左四个方向的内边距,例如:
padding: 10px 20px 10px 20px;
(分别对应上、右、下、左的内边距值为 10 像素和 20 像素)。也可以使用缩写形式,如padding: 10px;
(四个方向内边距均为 10 像素)。
-
-
示例
-
假设一个
<div>
元素,设置了padding: 20px;
,那么这个元素内部的内容与边框之间就会有 20 像素的距离。
-
二、Margin(外边距)
-
定义:Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。
-
作用
-
分隔不同的元素,使页面布局更加清晰。
-
可以用来调整元素在页面中的位置。
-
-
语法
-
与 padding 类似,margin 也可以分别设置四个方向的外边距,例如:
margin: 15px 30px 15px 30px;
。也有缩写形式,如margin: 15px;
(四个方向外边距均为 15 像素)。
-
-
示例
-
有两个相邻的
<div>
元素,第一个元素设置了margin-right: 20px;
,第二个元素设置了margin-left: 20px;
,那么这两个元素之间就会有 40 像素的间隔(20 像素来自第一个元素的右边距,20 像素来自第二个元素的左边距)。
-
-
总之,padding 和 margin 在 HTML 和 CSS 中起着关键作用,合理地运用它们可以实现美观、整洁的页面布局。