jquery - 仅将 CSS 边距应用于 div 中的文本

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>