設計 HTML 圖片與圖片邊框間的距離

設計 HTML 圖片與圖片邊框間的距離可以利用 CSSpadding 屬性來設計,padding 是所謂的內距,用來調整盒子模型中的元素與邊框之間的距離,以 HTML 預設的圖片來說,圖片本身與圖片邊框其實是連在一起的,所以很多人可能從來都不知道圖片有邊框,網頁設計師可以利用 padding 將圖片與邊框間的距離拉大以增加視覺效,也可以搭配陰影的效果來設計立體浮起來的視覺感覺。

CSS padding 內距屬性的語法
padding: 內距;
CSS 的 padding 屬性只要設定好內距就能使用,內距的設定方式可以是一次設定好四個邊或是每個邊獨立分開設計,詳細的用法可以參閱我們在《CSS padding 內距屬性與用法範例》篇的內容。

設計 HTML 圖片與圖片邊框間的距離實際範例
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:5px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:10px;"><br>
<img src="upload/20151214185452.png" style="border:2px #ccc solid;padding:20px;">
範例的效果





為了讓各位讀者朋友們可以看到利用 CSS padding 所創造出來的 HTML 圖片與圖片邊框間的距離效果,範例總共準備了三張圖片,分別將圖片與邊框間的距離設定為 5px, 10px 以及 20px,數字越大代表距離越大,效果應該很明顯吧!另外,範例語法中的 border 是用來設定圖片邊框用的,在這裡我們將邊框粗細設定為 2px、顏色為灰色。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C