CSS内外边距的区别

最新推荐文章于 2024-07-26 19:29:32 发布

山顶洞人95277

最新推荐文章于 2024-07-26 19:29:32 发布

阅读量1.1k

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44567226/article/details/116973493

版权

本文详细介绍了CSS中的外边距（Margin）和内边距（Padding）的概念。外边距是元素边框外的空白区域，用于创建元素间的额外空间；内边距则是边框与内容之间的距离，影响元素内容与边框的位置。通过实例演示了如何设置内外边距，并强调了内外边距设置时应注意不超过父元素，以避免布局紊乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

外边距(Margin)：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
内边距(Padding)：元素的内边距在边框和内容区之间。
在初学CSS的时候内外边距的解释比较抽象
下面是详细解释：
创建一个页面给body设置一个灰色背景，为了方便演示我加了float左浮动
创建一个div元素设置属性并且添加内容
内边距简单解释就是元素与该元素的内容的距离

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>内外边距的区别</title> 
    <style>body div{float:left;}</style>
</head>
<body style="background-color:gray">
	<div style="background-color:white; height:40px;width:200px;">这是一个div元素</div>
</body>
</html>

在这里插入图片描述
这就是你的内容和当前所在元素的距离

这时我们给这个元素的内边距进行设置再看看效果（左边与顶部内边距与内容距离20px）

<div style=" padding:20px 0 0 20px; background-color:white; height:40px;width:200px;">这是一个div元素</div>

在这里插入图片描述
内边距的改变会影响到元素的大小(内边距高宽+元素高宽)
接下来是外边距
外边距简单解释就是父元素与子元素或者两个同级元素之间的距离，
我们再创建一个div元素:

<div style="background-color:lawngreen; height:40px; width:200px">这是另外一个div元素</div>

在这里插入图片描述
给这个元素添加外边距：margin:20px 0 0 20px;效果如下：

再给第一个元素也添加外边距：

可以试试给第二个元素左边加大外边距，两个子元素的距离也会发生改变
div元素与body主体出现了距离，这就是设置外边距的效果，需要注意的是，如果子元素内外边距超过了父元素可能会使的布局紊乱，所以内外边距最好不要超过父元素。