显示表格在页边距顶部占用额外空间答案

【问题标题】：display table taking extra space on margin top显示表格在页边距顶部占用额外空间
【发布时间】：2019-08-16 12:58:16
【问题描述】：

我尝试在引导程序中创建一个类似于 input-group 的组件。我没有使用引导程序的默认输入组类的原因是默认情况下我无法在输入组插件中添加多个按钮和输入元素。所以我决定使用 display-table 属性创建自定义输入组，但是当我使用这个属性时，在按钮部分的顶部添加了一些额外的空间。

我需要在同一行对齐输入和计数器组件。

HTML 部分

 <div class="product-order-form" matAutocompleteOrigin #origin="matAutocompleteOrigin">
    <div class="product-inputGroup tableElem">
        <div class="tableRow">
            <input class="form-control tableCell" type="text" matInput [formControl]="myControl" [matAutocomplete]="auto" [matAutocompleteConnectedTo]="origin">
            <div class="counter tableCell">
                <div class="counterContainer">
                    <div class="value-button" id="decrease" value="Decrease Value">-</div>
                    <input type="text" id="number" value="0" />
                    <div class="value-button" id="increase" value="Increase Value">+</div>
                </div>


            </div>
        </div>


    </div>
 </div>

CSS：

.tableElem{
  display:table;
  width:100%;
}

.tableRow{
  display:table-row;
  width:100%;
}
.tableCell{
  display:table-cell;
}

.product-order-form{
  height: 30px;
}
.counterContainer {
  width: 150px;
  height:30px;  
}

.value-button{
    text-align: center;
    height: 100%;
    width: 50px;
    background: lightgray;
    padding: 5px;
    box-sizing: border-box;
    float: left;
}

.value-button:hover {
  cursor: pointer;
}



input#number{
    text-align: center;
    height: 100%;
    border: none;
    width: 50px;   
    float: left;   
    box-sizing: border-box;
    border-top: 0.5px solid lightgray;
    border-bottom: 0.5px solid lightgray;
}

这是我的stackblitz

【问题讨论】：

请在您的问题中添加代码。在这种情况下，外部链接是不可接受的。
我在我的问题中添加了 html 和 css。

标签： css twitter-bootstrap-3

【解决方案1】：

这里有两个问题：

.product-order-form 设置高度为 30px，这意味着它比它的一些孩子/兄弟姐妹短。这会导致问题（尝试添加 overflow:hidden 以查看它的实际效果）
.tableCell 没有 vertical-align，这意味着它将自己定位在顶部 o/t 组件。尝试添加vertical-align: middle，它应该可以正常工作

TL;DR


.tableCell[_ngcontent-c2] {
    display: table-cell;
    vertical-align: middle;
}
.product-order-form[_ngcontent-c2]{
  height: auto;
}

应该做的伎俩:)

【讨论】：