如何在图像之间留出空间？答案

【问题标题】：How can you make space between images?如何在图像之间留出空间？
【发布时间】：2017-01-11 14:47:03
【问题描述】：

如何在图像之间留出空间？（如果您将图像悬停，它会显示一些文字，我不知道这是否会有所不同）

cs:

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


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

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


}

从上到下。

Row1：左侧的图像

Row2：中间的图片

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>

我用margin试过了，但是没用

【问题讨论】：

为什么将包装器的高度设置为至少比图像高 20%？

标签： jquery html css image

【解决方案1】：

给父div，margin值。

【讨论】：

【解决方案2】：

对于所有带有 id="wrapper" 的 div，添加一个具有以下属性的类 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>

【讨论】：

【解决方案3】：

最好的办法是使用 CSS 的 visibility 属性，MDN link

来自文档“可见性属性可用于隐藏元素，同时保留原本应该存在的空间。它还可以隐藏表格的行或列”

做了一个适合这个场景的小小提琴。

fiddle here

将初始值设置为隐藏并在悬停时使用适当的 CSS 选择器进行切换。例如：

p {
  visibility: hidden;
}

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

【讨论】：