Html 如何使用填充将图像放置在文本旁边?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10001294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:31:06  来源:igfitidea点击:

How to position image next to text with padding?

htmlcss

提问by bobo2000

<h2><img src="img.jpg" height="75px"> some text</h2>

I would like to position my image right next to a block of text but have it padded down slightly, how can I achieve this? I have tried style: padding 10px;without success inside the image tag.

我想将我的图像放在文本块旁边,但将其稍微向下填充,我该如何实现?我style: padding 10px;在图像标签内尝试过但没有成功。

采纳答案by laymanje

I think you are looking for something like this. http://jsfiddle.net/3HZr7/

我想你正在寻找这样的东西。http://jsfiddle.net/3HZr7/

<h2>
    <img src="img.jpg" height="75px"> 
    <span>some text</span>
</h2>



h2{
  overflow: auto;    
}

h2 span{

   float: left;
   margin-top: 10px;
   margin-left: 10px;
}

h2 img{
   float: left;        
}?

回答by Madara's Ghost

You misunderstand the CSS box model.

你误解了CSS 盒模型

Padding is for the space inside of the box, marginon the other hand, is responsible for the space outside the box, the space the box has from its container.

填充是盒子内部的空间,另一方面,边距负责盒子外部的空间,盒子与其容器之间的空间。

So your possible solutions are simple:

所以你可能的解决方案很简单:

  1. Apply paddingon the parent element.
  2. Apply marginon the image element.
  1. 应用于padding父元素。
  2. 应用于margin图像元素。

Example.

例子。