0

我正在使用 flex 布局学习 HTML，但遇到了边距问题。我知道问题是设置了两个相邻的具有margin属性的块元素，会发生margin-collapsing。这些是具有相同级别的元素。如何防止边距折叠，以便我可以为这些元素自由设置边距顶部和边距底部？我希望每个元素都有 12px 的 margin-top 和 margin-bottom 。这是我的边距折叠代码：

<!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>layout 01</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
        integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/base.css">
<style>
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
* {
    box-sizing: inherit;
    font-size: inherit;
}

.row {
    display: flex;
    /* flex-flow: row nowrap; */
    margin-left: -12px;
    margin-right: -12px;
}

.col {
    padding-left: 12px;
    padding-right: 12px;
}

.col-12 {
    flex-basis: 100%;
}
.col-11 {
    flex-basis: 91.667%;
}
.col-10 {
    flex-basis: 83.333%;
}
.col-9 {
    flex-basis: 75%;
}
.col-8 {
    flex-basis: 66.667%;
}
.col-7 {
    flex-basis: 58.333%;
}
.col-6 {
    flex-basis: 50%;
}
.col-5 {
    flex-basis: 41.667%;
}
.col-4 {
    flex-basis: 33.333%;
}
.col-3 {
    flex-basis: 25%;
}
.col-2 {
    flex-basis: 16.667%;
}
.col-1 {
    flex-basis: 8.333%;
}


.row {
    margin-top: 12px;
    margin-bottom: 12px;
}

.row-item {
    height: 100px;
}

.box {
    background-color: orange;
    width: 100%;
    height: 100%;
}
</style
</head>
<body>
    <div id="app">
        <div class="row">
            <div class="col col-4 row-item">
                <div class="box"></div>
            </div>
            <div class="col col-8 row-item">
                <div class="box"></div>
            </div>
        </div>

        <div class="row">
            <div class="col col-4 row-item">
                <div class="box"></div>
            </div>
            <div class="col col-8 row-item">
                <div class="box"></div>
            </div>
        </div>

        <div class="row">
            <div class="col col-4 row-item">
                <div class="box"></div>
            </div>
            <div class="col col-8 row-item">
                <div class="box"></div>
            </div>
        </div>

        <div class="row">
            <div class="col col-12 row-item">
                <div class="box"></div>
            </div>
        </div>

    </div>
</body>
</html>

我感谢所有花时间为我解决问题的人，也许还有其他人。

4

0 回答 0