css中margin与padding的区别_一文带你掌握CSS基础

2023-06-30 02:08:54 互联网

hello大家好，我是城乡经济网小晟来为大家解答以上问题，css中margin与padding的区别（一文带你掌握CSS基础很多人还不知道，现在让我们一起来看看吧！

(相关资料图)

一个网页前端是由HTML DOM与嵌套组合形成视图结加上 CSS 样式的修饰形成视图，由JavaScript 接受用户的交互请求，以事件机制来响应用户交互操作而形成的。CSS是前台页面形式最重要的部分，它负责控制DOM元素的页面布局和颜色、大小的属性。

在CSS中有一著名的盒子模型理论，可以用它来控制DOM的位置。基于Div css技术的“盒子模型”的出现大大代替了传统的table表格嵌套。

虽然其十分好用，但是对于很多新手来说，却很难搞清楚它几个属性和内容之间的联系个区别。

所有页面的元素都可以看做一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往会比单纯的内容要大。因此，可以通过盒子的边框和距离等参数来控制内容的位置。

Div CSS 盒子模型

说明：

1、Margin：中文叫外边距，主要作用是控制边框外（border以外）的区域，外边距是透明的。

2、Border：中文叫边框，是围绕在内边距（padding）和内容外的边框。注意，它不是透明的。

3、Padding：中文叫内边距，控制内容周围的区域，内边距是透明的。

4、Content：内容，盒子的内容，显示文本和图像。

5、在Css文件中设置的Div的Css.width和Css. height就是内容的宽和高。

6、盒子实际尺寸有可能大于内容尺寸：

盒子模型的总宽度等于content（宽） padding（左右） border（左右） margin（左右）;

盒子模型的总高度等于content（高） padding（上下） border（上下） margin（上下）;

接下来通过实例演示的方式来一一讲解Margin、Border、Padding的作用和区别。

页面如图所示：

原始样式

代码：

HTML:

CSS:.TsetUpper{width: 400px;height: 200px;background-color: black;position: relative;margin: auto;text-align: center;}.TsetMiddle{width: 600px;height: 200px;background-color: red;position: relative;margin: auto;}.TsetDown{width: 400px;height: 200px;background-color: black;position: relative;margin: auto;text-align: center;}

元素边框：我们可以在CSS边框属性中设置元素边框的样式和颜色。

按如下代码设置Div(TsetMiddle)的Border（边框）：

border-style:solid;border-width: 10px;border-color: aqua;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200 30 30了，而且可以设置其底色和线条样式。

Border

margin 控制周围的元素区域。margin 没有背景颜色，是完全透明的。通过margin可以控制元素与四周元素的空隙距离；

按如下代码设置Div(TsetMiddle)的margin（外边距）：

margin: 30px auto;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200 30（Border） 30（Margin） 30（Border） 30（Margin）了。

Margin

Padding：当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

按如下代码设置Div(TsetMiddle)的margin（外边距）：

padding: 30px;

刷新页面如下图：此时TsetMiddle这个盒子的总宽度已经变成200 30（Padding） 30（Border） 30（Margin） 30（Padding） 30（Border） 30（Margin）了。

Padding

1、各属性的值可以用px为单位，也可以用em，百分比等。

2、可以利用盒子的各种属性，调整其内容在父容器中的位置。

本文就为大家讲解到这里，希望对大家有所帮助。

标签：

最新发布

精彩图文

: 2023年保定顺平县幼儿园招生（报名+收费标准）要闻

来源：本地宝

: 焦点讯息：本田凌派换防冻液需要放空气吗_本田凌派多久加防冻液？

来源：互联网

: 雅创电子：公司产品未应用至机器人领域内当前关注

来源：每日经济新闻

: 环球热消息：AI制药来了！有患者接受由生成式人工智能发现和设计药物治疗

来源：站长之家

: 【世界独家】一品红：全资子公司获得盐酸罗哌卡因注射液注册证书

来源：证券时报·e公司

精彩推送

Copyright @ 2015-2018 华北it网版权所有备案号：粤ICP备18023326号-8 联系邮箱：855 729 8@qq.com