0

CSS を使用して配置とサイズ変更をいじる数日があり、div の要素とボタンの要素の間のギャップに悩まされています。

ギャップ問題の図解 メインの保持 div の背景は緑色で、含まれている div のホルダーの背景はピンク色です。

したがって、ラベルとして機能する div とテキストボックス ホルダー、およびボタンのホルダーとして機能する div 内に配置されたボタンの間にギャップがあることがわかります。

また、成功せずにcssリセットを含めようとしました。また、パディングマージンとボーダーをリセットするためにグローバルセレクターを配置しようとしました

* {
      padding:0; 
      margin : 0
      border-width: 0;
  }

所有者が占有しているスペースを完全に制御するために、これらのギャップを解消する方法を本当に考えています。いずれにせよ、ここに私の非常に単純なコードがあります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .interactput {
            background-color: green;
        }

        .interactput div {
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-color: lightpink;
        }

        .interactput div button {
            background-color: lightgoldenrodyellow;
        }
    </style>

</head>
    <body>
        <div id="AddessEditor" class="interactput">
            <div>
                <label>This is a label inside a div</label>
            </div>
            <div>
                <input type="text" value="This is input type=text inside a div"/>
            </div>
            <div>
                <button>We are</button>
                <button>Three buttons</button>
                <button>Inside a div</button>
            </div>

        </div>
    </body>
</html>
4

3 に答える 3

0

このような

デモ

CSS

* {
    padding: 0;
    margin : 0
}
.interactput {
    background-color: green;
    overflow:hidden;
   }

.interactput div {
    float:left;
    overflow: hidden;
    vertical-align: middle;
    background-color: lightpink;
        border: none;
}
.interactput div button {
    background-color: lightgoldenrodyellow;
    border: none;
}
.interactput div input {
    border: none;
}
于 2013-10-11T12:36:39.360 に答える