仅在div中应用CSS边距仅用于文本

Question

我使用jQuery在单击该图像时将图像和附带文本添加到div。现在，我想在图像&文本之间添加更多空白区域。但是，我不知道如何在没有设计图像样式的情况下设置文本的样式。您的帮助表示感谢。只是为了澄清，.imgDescription包含图像。

$('.imgDescription').click(function() { 
 
    $('#expandservices').empty(); 
 
}).click(function() { 
 
    $(this).clone().appendTo($('#expandservices')) 
 
}).click(function() { 
 
    var info = ['Weplay farmville!','Need help signing onto health.gov? We can take you through the process step by step securely','We can give you the ins and outs of navigating gmail, msn, hotmail and other email services','We can help you get those Hello Kitty slippers you saw online on your doorstep in a couple days ','We can help you research topics on Google','From iPads to Kindles, we have the expertise to make your device management a breeze']; 
 

 
    $('#expandservices').append((info[$(this).index()-1])); 
 
});

#expandservices { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<h2 class="btn-primary">Learn More about Our Services</h2> 
 
<div id="center"> 
 
    <br> 
 
    <div class="imgDescription"> 
 
    <span><a href="#socialmedia">Social Media</a></span> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/twitter.jpeg"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <span><a href="#healthcare">Healthcare</a></span> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/health.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <span><a href="#email">Email</a></span> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/gmail.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <span><a href="#socialmedia">Online Shopping</a></span> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/amazon.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <span><a href="#socialmedia">Web Browsing</a></span> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/googling.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <span><a href="#device">Devices</a></span> 
 
    <div class="imgcontainer"> 
 
     <img onClick="expanddevice()" src="pics/device.png"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- Clicking on a div above will cause an explainer div to appear below. --> 
 
<p id="expandservices"></p>

Answer 1

变化span其中包含文本div并设置margin它。

也为.imgDescription给予组更多的空间。

$('.imgDescription').click(function() { 
 
    $('#expandservices').empty(); 
 
}).click(function() { 
 
    $(this).clone().appendTo($('#expandservices')) 
 
}).click(function() { 
 
    var info = ['Weplay farmville!','Need help signing onto health.gov? We can take you through the process step by step securely','We can give you the ins and outs of navigating gmail, msn, hotmail and other email services','We can help you get those Hello Kitty slippers you saw online on your doorstep in a couple days ','We can help you research topics on Google','From iPads to Kindles, we have the expertise to make your device management a breeze']; 
 

 
    $('#expandservices').append((info[$(this).index()-1])); 
 
});

#expandservices { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
} 
 

 
.imgDescription { 
 
    margin-bottom: 20px; 
 
} 
 

 
.imgText { 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 

 
<h2 class="btn-primary">Learn More about Our Services</h2> 
 
<div id="center"> 
 
    <br> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#socialmedia">Social Media</a></div> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/twitter.jpeg"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#healthcare">Healthcare</a></div> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/health.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#email">Email</a></div> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/gmail.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#socialmedia">Online Shopping</a></div> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/amazon.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#socialmedia">Web Browsing</a></div> 
 
    <div class="imgcontainer"> 
 
     <img src="pics/googling.png"> 
 
    </div> 
 
    </div> 
 
    <div class="imgDescription"> 
 
    <div class="imgText"><a href="#device">Devices</a></div> 
 
    <div class="imgcontainer"> 
 
     <img onClick="expanddevice()" src="pics/device.png"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- Clicking on a div above will cause an explainer div to appear below. --> 
 
<p id="expandservices"></p>