圖像旁邊的文字空間

正如您所看到的。我在頭文件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

圖像旁邊的文字空間

回答

相關問題