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

divにテキストが含まれていますし、そのためのmargin設定変更span。

.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>