當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > DIV+CSS > CSS設(shè)置圖片與文字的間距

CSS設(shè)置圖片與文字的間距

2012/11/24 13:11:47作者:佚名來源:網(wǎng)絡(luò)

移動端

【實例介紹】

CSS設(shè)置圖片與文字的間距

希望圖片本身與文字有一定的距離只需要給<img>標(biāo)記添加margin屬性即可。margin屬性包括margin.top、margin-right,margin-bottom、margin—left、margin。屬性margin可以用來同時設(shè)置圖片的四邊外邊距,而其他的margin屬性只能設(shè)置其自各的外邊距。

【基本語法】

margin:auto  |  length

【語法介紹】

auto:值被設(shè)置為相對邊的值。
length:由浮點數(shù)字和單位標(biāo)識符組成的長度值或百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對象的高度。對于內(nèi)聯(lián)對象來說,左右外延邊距可以是負數(shù)值。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> </head> <style> div { width:300px; border:1px solid green} img { float:left; width:120px; height:120px} img{margin-left: 10px;} img{margin-right: 10px;} </style> <body> <div> <img src="風(fēng)景3.jpg" width="189" height="172" />景物是風(fēng)景構(gòu)成的客觀因素、 基本素材,是具有獨立欣賞價值的風(fēng)景素材的個體,包括山、水、植物、動物、空氣、 光、建筑以及其他諸如雕塑碑刻、勝跡遺址等有效的風(fēng)景素材。景感是風(fēng)景構(gòu)成的活躍 因素、主觀反映,是人對景物的體察、鑒別和感受能力。例如視覺、聽覺、嗅覺、味覺、 觸覺、聯(lián)想、心理等。條件是風(fēng)景構(gòu)成的制約因素、緣因手段,是賞景主體與風(fēng)景客體所 構(gòu)成的特殊關(guān)系。包括了個人、時間、地點、文化、科技、經(jīng)濟和社會各種條件等。</div> </body> </html>

【代碼分析】

在代碼中,加粗部分的代碼標(biāo)簽是設(shè)置圖片與文字的左間距和右間距都為l0px,效果如圖所示。

設(shè)置圖片與文字的間距運行效果

 【素材及源碼下載】

請點擊:設(shè)置圖片與文字的間距 下載本實例相關(guān)素材及源碼

 

標(biāo)簽: 圖片  文字  間距