增加图片与文字之间的空间

Question

如何增加图像和div之间的空间？我必须在一个对象的div中显示一些文本。图像位于一个标记中，文本将位于图像旁边的div标记中。

＆＃13;

＆＃13;

<div>
  <div id="top">
    <img src="" id="toppopupimage" hspace="50" style="width:85px;height:90px;float:left;background-color:white;">
    <div id="text" class="externaltext"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在img标签或div上应用保证金：

$('#trigger').click(function(e){
    e.preventDefault();
    $(this).parent().addClass('bar');
});

Answer 2

一种方法是将margin和float添加到#text div中：

#text {
    margin-left: 15px;
    float: left;
}

<div>
    <div id="top" >
      <img src="" id="toppopupimage" hspace="50" style="width:85px;height:90px;float:left;background-color:white;">
      <div id="text" class="externaltext">Text</div>
    </div>
</div>

另一种方法是从图像中删除float并在元素上设置display: inline-block;：

img {
    width: 85px;
    height: 90px;
    background: white;
    display: inline-block;
}

img + div {
    display: inline-block;
    vertical-align: top;
}

<div>
    <div id="top" >
      <img src="" id="toppopupimage" hspace="50" >
      <div id="text" class="externaltext">Text</div>
    </div>
</div>

Answer 3

您可以使用css规则并为图像或文本div添加边距。

＆＃13;

＆＃13;

#text {
  margin: 30px;
}

＆＃13;

<div>
  <div id="top">
    <img src="" id="toppopupimage" hspace="50" style="width:85px;height:90px;float:left;background-color:white;">
    <div id="text" class="externaltext">
      SOME TEXT HERE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

为img设置margin-right或为文本设置margin-left。无论哪种方式都可行。

#top img {
  margin-right: 55px;
}

<div>
  <div id="top">
    <img src="http://placehold.it/85x90" id="toppopupimage" hspace="20" style="width:85px;height:90px;float:left;background-color:white;">
    <div id="text" class="externaltext">
      I am separated from the image by 55px
    </div>
  </div>
</div>

Answer 5

首先你为你的文本div设置float左边然后你给了margin，因为你div为父div的全宽

＆＃13;

＆＃13;

#text {
  float: left;
  margin-left: 50px;
}

＆＃13;

<div>
  <div id="top">
    <img src="" id="toppopupimage" hspace="50" style="width:85px;height:90px;float:left;background-color:white;">
    <div id="text" class="externaltext">
      SOME TEXT HERE
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

输出