Anwenden von CSS-Rändern auf Text nur in div

Question

Ich habe jQuery verwendet, um einem Div ein Bild und einen begleitenden Text hinzuzufügen, wenn auf dieses Bild geklickt wird. Jetzt möchte ich mehr Leerraum zwischen dem Bild & Text hinzufügen. Allerdings kann ich den Text nicht stylen, ohne das Bild zu stylen. Ihre Hilfe wird sehr geschätzt. Nur um zu klären, .imgDescription enthält das Bild.

$('.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

ändern span die den Text zu div enthält und setzen margin dafür.

Auch für .imgDescription, um den Gruppen mehr Platz zu geben.

$('.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>