文章目录

一、外边距

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定义块元素的垂直外边距时, 可能会出现外边距的合并

主要有两种情况 :

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

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

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

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

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

解决方案

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

七、清除元素的内外边距

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

语法

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

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

# css
Logo
天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐

cover

【感知机】感知机(perceptron)学习算法例题及详解

avatar 天启AI社区
cover

AI云原生：数智化时代AI Agent加速落地的技术基石与实践指南（THS）

avatar 天启AI社区
cover

【AI论文】设计实验室：通过迭代检测与修正来设计幻灯片

avatar 天启AI社区