CSS - 盒子模型 - 外边距

最新推荐文章于 2022-11-11 20:07:33 发布

学习中的小菜鸟.

最新推荐文章于 2022-11-11 20:07:33 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33962481/article/details/117111873

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

文章目录

一、外边距
- 属性
二、margin的简写方式
三、外边距可以让块级盒子水平居中
四、行内元素和行内块元素水平居中
五、外边距合并
- 相邻块元素垂直外边距的合并
六、嵌套块元素垂直外边距的塌陷
- 解决方案
七、清除元素的内外边距
- 语法

一、外边距

margin属性用于设置外边距, 即控制盒子与盒子之间的距离

属性

margin-left : 左外边距
margin-right : 右外边距
margin-top : 上外边距
margin-bottom : 下外边距

二、margin的简写方式

margin: 上外边距 右外边距 下外边距 左外边距

三、外边距可以让块级盒子水平居中

需要满足两个条件

盒子必须指定了宽度
盒子左右的外边距都设置为auto

.div {
	width: 900px;
	height: 200px;
	background-color: red;
	margin: 0 auto;
}

四、行内元素和行内块元素水平居中

行内元素或者行内块元素水平居中给其父元素添加text-align: center 即可.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 900px;
            background-color: red;
            text-align: center;
            margin: 0 auto;
        }
    </style>

</head>

<body>
    <div>
        <a href="#">行内元素实现水平居中</a>
    </div>
</body>

</html>

五、外边距合并

使用margin定义块元素的垂直外边距时, 可能会出现外边距的合并

主要有两种情况 :

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并

有上下相邻的两个块元素, 上面的元素有下外边距 margin-bottom, 下面的元素有上外边距 margin-top, 则它们之间的垂直间距取两个值中的较大者, 这种现象被称为相邻块元素垂直外边距的合并

六、嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素, 父元素有上外边距同时子元素也有上外边距, 此时父元素会塌陷较大的外边距值.

解决方案

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow: hidden

七、清除元素的内外边距

网页元素很多都带有默认的内外边距, 而且不同浏览器默认的也不一致.

语法

* {
	/* 清除内边距 */
	padding: 0;
	/* 清除外边距 */
	margin: 0;
}

这句话也是我们css的第一行代码
行内元素尽量只设置左右的内外边距

学习中的小菜鸟.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS - 盒子模型 - 外边距

文章目录一、外边距属性二、margin的简写方式三、外边距可以让块级盒子水平居中四、行内元素和行内块元素水平居中一、外边距 margin属性用于设置外边距, 即控制盒子与盒子之间的距离属性margin-left : 左外边距margin-right : 右外边距margin-top : 上外边距margin-bottom : 下外边距二、margin的简写方式margin: 上外边距右外边距下外边距左外边距三、外边距可以让块级盒子水平居中需要满足两个条件盒子必须指定了
复制链接

扫一扫

专栏目录