使用CSS与HTML实现div对齐、去除多余间距的最优方案咨询

• 优先把外层容器.topSection改成flex布局，添加align-items: stretch属性，三个并排的子列会自动等高，直接解决最右侧列和左侧上下对齐的需求，还能消除inline-block自带的默认字符空白间隙，这是当前多余间距的主要来源之一。
• 清理冗余边距：当前代码中不同层级容器混用了大量padding、margin公共类，多层边距叠加就产生了无用空白。把三个子列的上下内外边距统一设置，列之间的间距用flex的gap属性控制，不要给单个元素随意添加上下margin，避免边距折叠导致的多余空白。
• 各列内部也用flex纵向排布元素：左侧的顶部操作栏、文本域，中间的两组图标框，右侧的四个对齐按钮，都采用flex-direction: column纵向排列，用gap调整内部间距，不要靠margin硬撑位置，保证内部元素排布整齐的同时不会撑歪容器高度。
• 全局添加box-sizing: border-box规则，避免padding、border撑大元素尺寸导致的对齐错位，删掉旧布局残留的vertical-align之类的冗余属性，避免和flex布局产生冲突。

参考代码 #

HTML #

<!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>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="mainContainer">
        <div class="topSection pd-10">
            <div class="pd-10">
                <div class="topBar">
                    <input type="text" value="36 pt">
                    <input type="text" value="Auto">
                    <div class="box">
                        <div class="leftAlign"></div>
                    </div>
                    <div class="box">
                        <div class="centerAlign"></div>
                    </div>
                    <div class="box">
                        <div class="rightAlign"></div>
                    </div>
                    <div>
                        <div class="circle"></div>
                    </div>
                </div>
                <div>
                    <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
                </div>
            </div>
            <div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5 ">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="mg-10 box">
                    <div class="logoUp"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoLeft"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoRight"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoDown"></div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS #

body {
    background-color: #262626;
    color: #c7c7c7;
    font-family: lucidagrande;
    /* font-size: 11px; */
    font-weight: 400;
}
input[type=text] {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    width: 10%;
    text-align: center;
}
textarea {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    /* width: 95%; */
}
/* .topSection {
    padding: 10px;
} */
.topSection>div,.leftSection {
    display: inline-block;
    background-color: #323232;
}
.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
}
.box {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 16px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
}
.topBar {
    margin-bottom: 15px;
    margin-top: 5px;
}
.topBar>div {
    display: inline-block;
    vertical-align: bottom;
}
.leftAlign {
    background: url(../images/leftAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.centerAlign {
    background: url(../images/centerAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.rightAlign {
    background: url(../images/rightAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.circle {
    border: solid 2px #525252;
    background-color: black;
    border-radius: 50px;
    height: 25px;
    width: 25px;
}
.plus {
    background: url(../images/plus.png) no-repeat center center;
    background-size: auto;
    height: 100%;
}
.iconBox {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 2px
}
.iconBox>div {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    border-style: dotted;
    height: 65%;
}
.logoUp {
    background: url(../images/logoUp.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.logoLeft {
    background: url(../images/logoLeft.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.logoRight {
    background: url(../images/logoRight.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.logoDown {
    background: url(../images/logoCenter.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}
.mg-5 {
    margin: 5px;
}
.pd-10 {
    padding: 10px;
}
.pd-5 {
    padding: 5px;
}
.pd-b-5 {
    padding-bottom: 5px;
}
.mg-10 {
    margin: 10px;
}

内容的提问来源于stack exchange，提问作者Coder