HTML DIV得到了家长的div内垂直偏移，为什么

为什么“输入状态”分区块得到其父母的偏移。

我没有尝试切换所有在Web检查器的CSS属性，似乎没有任何修复偏移量。它从哪里来的？

请看看这个演示：http://jsfiddle.net/pengyanb/Lfvnr9y1/

.containing_tab { 
 
    width: 100%; 
 
    height: 40pt; 
 
    margin-bottom: 20pt; 
 
    border: 1px red solid; 
 
} 
 
.status_tab { 
 
    display: inline-block; 
 
    width: 48%; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    box-shadow: 10px 10px 10px black; 
 
    font-family:'MS sans serif, Fallback, sans-serif'; 
 
    text-shadow:0 0 0 !important; 
 
    text-align: center; 
 
    line-height: 40pt; 
 
    background-color:green; 
 
    border:1px blue solid; 
 
} 
 
.middle_padding { 
 
    display: inline-block; 
 
    width: 1%; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border:1px blue solid; 
 
}

<div class="containing_tab"> 
 
    <div class="status_tab">Input 1 Status</div> 
 
    <div class="middle_padding"></div> 
 
    <div class="status_tab">Input 2 Status</div> 
 
</div>

我切换了所有的CSS属性的Web检查，

来源

2015-10-15 Peter Peng

因为内联元素的vertical-align属性默认为baseline。只需更改顶部：

.status_tab { 
    display: inline-block; 
    width: 48%; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    border-radius: 10px; 
    box-shadow: 10px 10px 10px black; 
    font-family:'MS sans serif, Fallback, sans-serif'; 
    text-shadow:0 0 0 !important; 
    text-align: center; 
    line-height: 40pt; 
    background-color:green; 
    border:1px blue solid; 
    vertical-align:top; 
}

jsFiddle example

来源

2015-10-15 22:47:27 j08691

解决了这个问题。非常感谢。 –

我现在明白了，“vertical-align”属性应用于div本身，而不是它包含的子元素，我的不好。 –

还有一个问题，为什么“middle_padding”div不需要“vertical-align：top;”属性，仍然得到正确的对齐？ –

从.containing_tab删除高度

.containing_tab { 
 
    width: 100%; 
 
    margin-bottom: 20pt; 
 
    border: 1px red solid; 
 
} 
 
.status_tab { 
 
    display: inline-block; 
 
    width: 48%; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border-radius: 10px; 
 
    box-shadow: 10px 10px 10px black; 
 
    font-family:'MS sans serif, Fallback, sans-serif'; 
 
    text-shadow:0 0 0 !important; 
 
    text-align: center; 
 
    line-height: 40pt; 
 
    background-color:green; 
 
    border:1px blue solid; 
 
} 
 
.middle_padding { 
 
    display: inline-block; 
 
    width: 1%; 
 
    height: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    border:1px blue solid; 
 
}

<div class="containing_tab"> 
 
    <div class="status_tab">Input 1 Status</div> 
 
    <div class="middle_padding"></div> 
 
    <div class="status_tab">Input 2 Status</div> 
 
</div>

来源

2015-10-15 22:46:22

的问题是，我需要定义块的整体HIGHT。 –

然后你可以尝试添加顶部：-25px;位置：相对;到.status_tab –

HTML DIV得到了家长的div内垂直偏移，为什么

回答

相关问题