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>