どのようにイメージ間にスペースを作ることができますか？

Question

どのように画像間にスペースを入れることができますか？上下から

.row1{ 
float:left; 
padding: 30px; 


} 
.row2{ 
float:left; 
padding: 30px; 

} 
.row3{ 
float:left; 
padding: 30px; 


} 

：

CS（あなたがイメージを置く場合、それはいくつかのテキストが表示されます、私はいくつかの貴様を行います場合は知りません）。

行1：左側の画像

行2：中間の

ROW3の画像：右の画像

 <div class="row1"> 
      <h3>Track/spots</h3> 
     <div id="wrapper"> 
      <img src="producten/banaan.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Banaan Spot <br> Prijs: vanaf &euro;58,75 </p> 
      </div> 

      <div id="wrapper"> 
      <img src="producten/track.jpg" width="300" height="200"class="hover" /> 
       <p class="text">Track Rail, Track Light <br> Aansluiting: 3 fase rail <br> Prijs: vanaf &euro;64,95 <br> Kleur: 3000K/4000K</p> 
        </div> 

      <div id="wrapper"> 
      <img src="producten/led.jpg" width="300" height="200" class="hover" /> 
       <p class="text">MR 16 spot <br> Aansluting: GU10/GU5.3<br> Voltage: 12V | 230V<br> Prijs: vanaf &euro;5,95<br>Kleur: 2500K// 2700K/3000K/4000K </p> 
      </div> 
     </div> 

      <div class="row2"> 
      <h3>Ledstrip</h3> 
       <div id="wrapper"> 
      <img src="producten/lestrip.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Ledstrip, SMD 5050, SMD 2835, RGB <br>Voltage: 12V/24V<br> Prijs: vanaf &euro;8,95 </p></div> 
     <div id="wrapper"> 
      <img src="producten/kleur.jpg" width="300" height="200" class="hover" /> 
        <p class="text"></p></div> 
     <div id="wrapper"> 
      <img src="producten/profiel.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p></div> 


     </div> 
       <div class="row3"> 

      <h3>Panelen</h3> 
        <div id="wrapper"> 
      <img src="producten/panel2.jpg" alt="large luxe beach" width="300" height="200" class="hover" /> 
        <p class="text">Rond Paneel<br> Aansluting: N.V.T.<br>Wattage: 6W/15W/18/20W/24W<br>Prijs: vanaf &euro;21,95</p></div> 
        <div id="wrapper"> 
      <img src="producten/panel.jpg" width="300" height="200" class="hover" /> 
       <p class="text">Vierkant Paneel<br> Aansluting: N.V.T.<br>Wattage: 36W/40W/42W<br>Voltage: 230V<br>Prijs: vanaf &euro;34,95<br>Kleur: 3000K/4000K</p></div> 
        <div id="wrapper"> 
      <img src="producten/rechthoek.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p> 
     </div> 
      </div> 

私は余裕でそれを試みたが、それは仕事をdidntの

Answer 1

次のプロパティを持つクラスimg-wrapperを追加します。

.img-wrapper{ 
    height:400px; //Just to set an example. 
    margin:5%; 
} 

その後、あなたのHTML内：

<div id="wrapper" class="img-wrapper"> 
      <img src="producten/profiel.jpg" width="300" height="200" class="hover" /> 
    <p class="text"></p></div> 

Answer 2

親部門div marginの値を指定します。 id="wrapper"でこれらすべてのdivのために

Answer 3

最善の策は、CSSのvisibilityプロパティを使用することです、MDN link

文書から "visibilityプロパティはスペースを残して要素を隠すために使用することができます。ホバリング時にも

fiddle here

が隠さに初期値を設定してください。は「

はちょっとシナリオが収まる小さなバイオリンを作った表の行や列を非表示にして、適切なCSSセレクタを使用して切り替えることができますたとえば：

p { 
    visibility: hidden; 
} 

.content:hover+p{ 
    visibility:visible; 
}