入力とdivの一致する高さ

Question

Divの高さと幅を入力フィールドの高さと幅に合わせようとしています。ここで

はjsfiddleです：https://jsfiddle.net/1kv70eg1/

#outerDivOne, #outerDivTwo { 
 
    height: 4em; 
 
    width: 20em; 
 
    border:solid blue 1px; 
 
} 
 
#onTop, #needSameWidth { 
 
    text-align: center; 
 
    border: solid #333333 1px; 
 
    font-size: .9em; 
 
    width: 5em; 
 
    height: 2em; 
 
    border-radius: 3%; 
 
    background-color: whitesmoke; 
 
    vertical-align: center; 
 
} 
 

 
#onRight, #needSameHeight { 
 
    display:inline-block; 
 
    text-align: center; 
 
    border: solid #333333 1px; 
 
    font-size: .9em; 
 
    width: 5em; 
 
    height: 2em; 
 
    border-radius: 3%; 
 
    background-color: whitesmoke; 
 
    vertical-align: center; 
 
    float: left; 
 
}

<div id='outerDivOne'> 
 
    <input type='text' id='onTop' placeholder='whatever'/> 
 
    <div id="needSameWidth"><output>Test</output></div> 
 
</div> 
 

 
<div id='outerDivTwo'> 
 
    <input type='text' id='onRight' placeholder='whatever'/> 
 
    <div id="needSameHeight"><output>Test</output></div> 
 
</div>

Answer 1

marginとpaddingには明示的な値を指定する必要があります。あなたの場合、それらはデフォルト（非ゼロ）で、あなたのレイアウトを歪ませます。

#outerDivOne, #outerDivTwo { 
 
    height: 4em; 
 
    width: 20em; 
 
    border:solid blue 1px; 
 
} 
 

 
#onTop, #needSameWidth { 
 
    text-align: center; 
 
    border: solid #333333 1px; 
 
    font-size: .9em; 
 
    width: 5em; 
 
    height: 2em; 
 
    border-radius: 3%; 
 
    background-color: whitesmoke; 
 
    vertical-align: center; 
 
    padding: 0em; 
 
    margin: 0em; 
 
} 
 

 
#onRight, #needSameHeight { 
 
    display:inline-block; 
 
    text-align: center; 
 
    border: solid #333333 1px; 
 
    font-size: .9em; 
 
    width: 5em; 
 
    height: 2em; 
 
    border-radius: 3%; 
 
    background-color: whitesmoke; 
 
    vertical-align: center; 
 
    float: left; 
 
    padding: 0em; 
 
    margin: 0em; 
 
}

<div id='outerDivOne'> 
 
    <input type='text' id='onTop' placeholder='whatever'/> 
 
    <div id="needSameWidth"><output>Test</output></div> 
 
</div> 
 

 
<div id='outerDivTwo'> 
 
    <input type='text' id='onRight' placeholder='whatever'/> 
 
    <div id="needSameHeight"><output>Test</output></div> 
 
</div>

私はまたCSSは、このような厄介な問題を軽減するためにアプローチをリセットし、チェックアウトをお勧めしたい：助けをhttps://meyerweb.com/eric/tools/css/reset/

Answer 2

私はどんな実験を行っていないが、私はあなたのルールセットのどちらが余白やパディングの設定を持っている参照してください。私はそれらを見ます。