html 内外边距区别以及解释

引入:

我们在之前的学习中学习了边框,我们发现只要是页面的标签元素,都可以实现边框的效果,那么接下来我们来讲解一个比较重要的知识点,边距,边距分为内边距和外边距,它们和边框一起是我们后面学习盒子模型的重要基础。

一、内边距(padding)

padding:内边距, 是指 :边框与内容之间的距离。

属性 作用
padding-top: 上内边距
padding-right: 右内边距
padding-bottom: 下内边距
padding-left: 左内边距

后面跟几个数值表示的意思是不一样的;

值的个数 表达意思
1个值 padding: 3px;上下左右都是3像素
2个值 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值 padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

代码演示

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS3制作3D图片立方体旋转特效</title>

    <style type="text/css">
        selector {
            padding: 15px;  /* 设置四个内边距为相同的值 */
            padding-top: 10px;  /* 设置上内边距的值 */
            padding-right: 5px; /* 设置右内边距的值 */
            padding-bottom: 20px; /* 设置下内边距的值 */
            padding-left: 10px; /* 设置左内边距的值 */
        }

    </style>
</head>
<body>

二、外边距(margin)

属性 作用
margin 外边距, 设置外边距会在元素之间创建"空白", 这段空白通常不能放置其他内容。
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
html 复制代码
margin:上外边距 右外边距  下外边距  左外边

取值顺序跟内边距相同。
代码演示:

html 复制代码
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>

    <style type="text/css">
        selector {
            margin: 20px;  /* 设置四个外边距为相同的值 */
            margin-top: 15px;  /* 设置上外边距的值 */
            margin-right: 10px; /* 设置右外边距的值 */
            margin-bottom: 5px; /* 设置下外边距的值 */
            margin-left: 5px; /* 设置左外边距的值 */
            margin: auto; /* 居中布局 */
        }
    </style>
</head>
<body>
</body>
</html>

3.内边距与外边距的区别:

内边距 (padding):内边距是元素内容与元素边界之间的空间。如果你给元素添加背景色,内边距的部分也会被背景色覆盖。换句话说,内边距是元素的一部分,改变内边距可以改变元素的大小。

外边距 (margin):外边距是元素边界与周围元素之间的空间。它存在于元素的外部,与元素的背景色无关。外边距主要用来控制元素与其周围元素的距离。

##4. 内外边距总结

在使用内外边距时,需要注意以下几点:

  1. 内边距和外边距都可以使用负值。

  2. 当两个相邻元素之间存在外边距时,会发生外边距重叠。外边距重叠时,重叠的外边距取决于具体情况,通常是取两个相邻元素中较大的外边距。

  3. 内边距可以为元素增加额外的尺寸,但不会改变元素的大小;外边距会增加元素的总尺寸,可能会影响元素的位置。

  4. 在实现水平居中和垂直居中时,内外边距是非常有用的,可以节省很多复杂的布局代码。

相关推荐
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
@大迁世界9 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙10 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
新酱爱学习10 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞10 小时前
把纸堆变数据流!Paperless-ngx让文件管理像打游戏一样爽:cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作
慧慧吖@10 小时前
关于两种网络攻击方式XSS和CSRF
前端·xss·csrf