仅在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为群组提供更多空间。

＆＃13;

＆＃13;

$('.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]));
});

＆＃13;

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

.imgDescription {
  margin-bottom: 20px;
}

.imgText {
  margin-bottom: 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;