4

私はdiv異なるbackground-colors の s を使用してゲーム ボードを作成しようとしているので、単純な css をいくつか書きました (この段階でそれを行う方法を考えているところですdiv。手動で s を書き込んだので、html/js は含まれていません)。

.grass {
    background-color: oliveDrab;
}

.dirt {
    background-color: sandyBrown;
}

div{
    height: 25px;
    width: 25px;
    display: inline-block;
    margin: 0;
}

私がそれをレンダリングしたとき、そしてマージンがありました。そのようです：

マージンを追加

だから私はfirebugをチェックしました、そしてそれは示していますmargin、、borderそしてpaddingです0!!

スタイルに余裕がない

デモフィドル。

ここで非常に基本的なcssの知識が欠けていると感じています。

4

4 に答える 4

6

インラインおよびインライン ブロック レベルの要素は、空白に敏感です。

最初の行の空白を削除したデモの jsFiddle の例を次に示します。

jsFiddle の例

<div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div><div id = "board" class = "grass"></div>
于 2013-09-23T20:35:54.163 に答える
4

inline-block要素があるからです。

マークアップの空白を削除するか、負のマージンを追加するか、または ではなくフロート要素を使用してdisplay:inline-blockください。

別の例を次に示します。

おそらく最良の解決策です。

body {
    width:150px;
}
div {
    float:left;
}

負のマージンを持つjsFiddle

空白を削除したjsFiddle

于 2013-09-23T20:35:41.067 に答える
1

@j08691 に同意: インラインおよびインライン ブロック レベルの要素は空白に敏感です。

ただし、次のように html マークアップを調整する必要はありません。

div {
   height: 25px;
   width: 25px;
   display: block;
   float: left;
}

br { 
   clear: both; 
}

フィドル。

于 2013-09-23T20:52:01.053 に答える