JSで表示されるイメージの不要な行間隔を避けるにはどうすればよいですか？

私は質問があります。私は新しいJSゲームに取り組んできた、とかろうじてさえ始め、そして私がハードルに走っています：JSで表示されるイメージの不要な行間隔を避けるにはどうすればよいですか？

var block = new Array(35); 
 
var blockdata = new Array(35); 
 
var count = 0; 
 
var rand = 0; 
 

 
while (count <= 35) { 
 
    rand = Math.floor((Math.random() * 3) + 1); 
 
    if (rand == 1) { 
 
    block[count] = "images/t.jpg"; 
 
    } else { 
 
    block[count] = "images/g.jpg"; 
 
    } 
 
    count++; 
 
} 
 

 
count = 0; 
 

 
while (count <= 35) { 
 
    blockdata[count] = document.createElement("IMG"); 
 
    blockdata[count].setAttribute("src", block[count]); 
 
    blockdata[count].position = "relative"; 
 
    document.body.appendChild(blockdata[count]); 
 

 
    //inneficient code below XD 
 
    if (count == 5) { 
 
    var mybr = document.createElement('br'); 
 
    document.body.appendChild(mybr); 
 
    } 
 
    if (count == 11) { 
 
    var mybr = document.createElement('br'); 
 
    document.body.appendChild(mybr); 
 
    } 
 
    if (count == 17) { 
 
    var mybr = document.createElement('br'); 
 
    document.body.appendChild(mybr); 
 
    } 
 
    if (count == 23) { 
 
    var mybr = document.createElement('br'); 
 
    document.body.appendChild(mybr); 
 
    } 
 
    if (count == 29) { 
 
    var mybr = document.createElement('br'); 
 
    document.body.appendChild(mybr); 
 
    } 
 

 
    count++; 
 
}

#content { 
 
    line-height: 10px; 
 
}

<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/AA4B3110-75F6-C945-9AFA-B001BE396F4E/main.js" charset="UTF-8"></script> 
 

 
<div id="content">

ゲームランニングがhere

見ることができます画像（t.jpg、g.jpg）が行に入れられます。私は上のURLから見ることができる行の間に小さなスペースを必要としません。

私はCSSを使って動作させようとしましたが、動作しません。

ありがとうございました！

出典

2016-12-14 Aditya Radhakrishnan

「
」要素を使用して行を分割しています。これは、デフォルトで特定の高さ/行の高さを持ちます。余分な要素（divやセクションなど）に画像をラップし、ラッパーのマージンを削除することを検討してください。margin：0; ' – Kyle

Image要素のように、デフォルトのインラインブロック（display: inline-block）です。これにより、このマージンが下に追加されます。あなたはmargin-bottom: -4pxをimgに追加することもできますが、それを表示：ブロックにすることもできますが、レイアウトが壊れて画像にfloat: leftを使用するか、画像の親にdisplay: flexなどの他のCSSを使用する必要があります。

そしてOFC、Kantociに、私は解決策を持っている<br>

出典

2016-12-14 11:51:36 Kantoci

実際には<br>タグが追加されているためです。

スペースを使わずに改行したい場合は、 <ul><li>というタグを使用します。

各liには、必要なブロック数を指定できます。

次の方法を行うことができます。更新スタイルブロックthis-

<style> 
body, 
ul, 
ul li { 
    padding: 0px; 
    margin: 0px; 
} 

#content { 
    line-height: 10px; 
} 
</style> 

<body> 
<ul id="content"> 
</ul> 
<script> 
var block = new Array(35); 
var blockdata = new Array(35); 

var count = 0; 
var rand = 0; 

while (count <= 35) { 
    rand = Math.floor((Math.random() * 3) + 1); 
    block[count] = rand == 1 ? "images/t.jpg" : "images/g.jpg"; 
    count++; 
} 

count = 0; 
var gap = 1; 
var list = "<li>"; 
while (count <= 35) { 
    var isLimit = (count > 0 && (5 * gap) + (gap - 1) == count) 
    list += isLimit ? "<img src=" + block[count] + "></li><li>" : "<img src=" + block[count] + ">"; 
    gap = isLimit ? gap + 1 : gap; 

    count++; 

} 
var content = document.getElementById("content"); 
content.innerHTML = list; 
</script>

出典

2016-12-14 11:51:08

私は自分のコードでどのようにそれを実装する必要がありますか？ Newbie here：D –

あなたがthis-margin-bottom：-4pxを使っているなら、あなたのコードを編集しました。それはできますが、ちょうどハックになります。負のマージンで行う正しい方法ではありません。 –

感謝を削除します。私は同じすべてのコードを保って、私はいくつかのCSSを追加しました：

img { 
    margin-bottom: -4px 
}

他のCSSコード不要で、すべての<div>タグが要求されていませんでした。

出典

2016-12-14 12:54:28

JSで表示されるイメージの不要な行間隔を避けるにはどうすればよいですか？

答えて

関連する問題