CSS3 盒模型- 外边距折叠

1简介
2 消除外边距内折

1简介

外边距折叠： 即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。

示例：
在这里插入图片描述
代码：

DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .top{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(37, 35, 35);
            }
            .bottom{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(200, 90, 90);
            }
        style>
    head>
    <body>
        <section class="top">section>
        <section class="bottom">section>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2 消除外边距内折

2.1 display: inline-block

样式：

在这里插入图片描述
代码：

DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .top{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(37, 35, 35);
                display: inline-block  /* 只为其中一个元素添加也可达到效果*/
            }
            .bottom{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(200, 90, 90);
                display: inline-block
            }
        style>
    head>
    <body>
        <section class="top">section>
        <section class="bottom">section>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.2 float属性值不是"none"的元素

代码：

DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .top{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(37, 35, 35);
                float: left;  /* 两个元素都要添加*/
            }
            .bottom{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(200, 90, 90);
                float: left; /* 两个元素都要添加*/
            }
        style>
    head>
    <body>
        <section class="top">section>
        <section class="bottom">section>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2.3 绝对定位

代码：

DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .top{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(37, 35, 35);
             
            }
            .bottom{
                width:100px;
                height:100px;
                margin:10px;
                background-color: rgb(200, 90, 90);
                position: absolute; /* 只能给该元素添加*/
                
            }
        style>
    head>
    <body>
        <section class="top">section>
        <section class="bottom">section>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

相关阅读:
Leetcode654 最大二叉树
leetcode 128. Longest Consecutive Sequence 最长连续序列(中等)
性能调优|Jmeter工具使用简记
应用计量经济学问题~
Vue2双向绑定源码分析
爬网页不用写代码？什么操作
LINQ to SQL （Group By/Having/Count/Sum/Min/Max/Avg操作符）
Linux--基本知识入门
spring boot 一个极简单的 demo 示例
数据建模中利用3σ剔除异常值进行数据清洗

原文地址：https://blog.csdn.net/AAAAA1235555/article/details/126878190