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;">
範例的效果<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、顏色為灰色。
延伸閱讀