时间戳

首页 > 解决方案 > 如何删除我的部分顶部的额外间距

html - 如何删除我的部分顶部的额外间距

问题描述

我尝试将 2 个部分一个接一个地制作，但在我的第一个部分添加了一些东西之后，一个未知的间距出现在它的顶部，所以这些部分根本不是线性的。

我已经尝试了各种方法，例如更改宽度、删除填充和边距、删除容器和其他常见的东西，但似乎没有任何效果，所以我希望你能帮我解决这个问题并解释为什么会这样如果可能会出现问题。

    .chip-area {
        border-bottom: darkred 10px solid;
        background-color: #efefef;
        text-align: center;
    }

    .chip-select-area {
        height: 380px;
        width: 40%;
        display: inline-block;
    }
    .stage-select-area {
        height: 380px;
        width: 50%;
        display: inline-block;
    }

    .img-chip-area {
        height: 100%;
    }

    .chip-area-s {
        width: 70%;
        margin-left: 10px;
    }

    .s-container {
        width: 100%;
        height: 25%;
    }
  <section class="chip-area">
        <div class="container">
            <section class="chip-select-area">
                <div class="s-container">
    	            <img class="img-chip-area" src="img.png">
    	            <select class="chip-area-s"></select>
                </div>
                <div class="s-container">
	                <img class="img-chip-area" src="img.png">
	                <select class="chip-area-s"></select>
                </div>
	            <div class="s-container">
	                <img class="img-chip-area" src="img.png">
	                <select class="chip-area-s"></select>
	             </div>
	             <div class="s-container">
	                 <img class="img-chip-area" src="img.png">
	                 <select class="chip-area-s"></select>
	             </div>
            </section>
            <section class="stage-select-area">				
            </section>
        </div>
    </section>

这是额外空间的图像http://prntscr.com/nr90sy

标签： htmlcss

解决方案

发生这种情况是因为inline-block. 你需要设置vertical-align: top你的元素。

见下文

.chip-area {
        border-bottom: darkred 10px solid;
        background-color: #efefef;
        text-align: center;
    }

    .chip-select-area {
        height: 380px;
        width: 40%;
        display: inline-block;
        vertical-align: top;
    }
    .stage-select-area {
        height: 380px;
        width: 50%;
        display: inline-block;
    }

    .img-chip-area {
        height: 100%;
    }

    .chip-area-s {
        width: 70%;
        margin-left: 10px;
    }

    .s-container {
        width: 100%;
        height: 25%;
    }
<section class="chip-area">
        <div class="container">
            <section class="chip-select-area">
                <div class="s-container">
    	            <img class="img-chip-area" src="img.png">
    	            <select class="chip-area-s"></select>
                </div>
                <div class="s-container">
	                <img class="img-chip-area" src="img.png">
	                <select class="chip-area-s"></select>
                </div>
	            <div class="s-container">
	                <img class="img-chip-area" src="img.png">
	                <select class="chip-area-s"></select>
	             </div>
	             <div class="s-container">
	                 <img class="img-chip-area" src="img.png">
	                 <select class="chip-area-s"></select>
	             </div>
            </section>
            <section class="stage-select-area">				
            </section>
        </div>
    </section>

推荐阅读