图像旁边的文字空间

正如您所看到的。我在头文件3上方有空格，我希望它与图像本身内联。图像旁边的文字空间

HTML

<div class="wrap"> 
<div class="content"><img src="img/user_avatar.jpg" width="100" height="101" /><h3>Jonas Hitler</h3></div> 
</div>

CSS

.wrap{ 
    display: inline-block; 
    border:1px solid; 
    border-radius:8px; 
    background-color:#fff; 
    padding:10px; 
    width:800px; 
    } 


.content{font-family:"Segoe UI"} 
.content img, .content h3 { float: left;} 
.content img {border:1px solid; border-radius:8px; margin-right: 15px;} 
.content h3 {font-size: 22px;} 
.content h3 span { font-size: 14px; }

来源

2014-02-25 user3284463

上[小提琴]（http://jsfiddle.net/看起来不错，你不需要任何单位NFfe5/90 /） – Dumisani

这是由用户代理应用的默认样式表。可以按如下方式重置通过margin: 0;：

.content h3 {font-size: 22px; margin: 0;}

Online Demo

用户代理应用一些默认样式的HTML元素。例如，他们在标题元素上应用顶部和底部margin，例如<h3>。

由于Google Chrome设置为-webkit-margin-before: 1em;和-webkit-margin-after: 1em;。

大多数Web开发者使用一些CSS声明在呼吁CSS Reset样式表的顶部重置用户代理默认样式。

是否使用一个微小的复位：

* { padding:0; margin: 0;}

还是一个well-known version通过CSS传奇埃里克迈耶。

来源

2014-02-25 14:17:46

只需添加一个margin-top: 0px;

.content h3 {font-size: 22px; margin-top: 0px;}

标题标记已申请通过浏览器保证金，你基本上是重新设置这种风格。

将来您应该考虑使用CSS Reset。

看到这支笔。 http://codepen.io/JRKyte/pen/akcbF

来源

2014-02-25 14:19:10

h3默认情况下有保证金。只需添加margin-top:0;到H3和你去：

http://jsfiddle.net/rhUb7/

来源

2014-02-25 14:19:48 DonJuwe

如果同时设置元素inline-block的，他们将设置一面，但侧面和你有浮动的项目时相比，更多的控制权 - 只记得删除标签之间的任何空白..只要更改上边距为0，而当值是0

.content > img, .content > h3 { display: inline-block; margin-top: 0; vertical-align: top;}

来源

2014-02-25 14:22:40

图像旁边的文字空间

回答

相关问题