css控制边界与边框示例(内边距、外边距使用方法)
生活随笔
收集整理的這篇文章主要介紹了
css控制边界与边框示例(内边距、外边距使用方法)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這篇文章主要介紹了css控制邊界與邊框示例,需要的朋友可以參考下
一、CSS控制邊界
1、內邊距
padding（內邊距也叫內填充） padding-bottom 長度/百分比 元件下端邊線的空隙 padding-left 長度/百分比 元件左端邊線的空隙 padding-right 長度/百分比 元件右端邊線的空隙 padding-top 長度/百分比 元件上端邊線的空隙簡易寫法：
padding:10px 一個值表示同時控制四個方向 padding:2px 4px 兩個值表示第一個值控制上下 第二個值控制左右 padding:2px 6px 10px 三個值表示第一個值控制上 第二個值控制右和左 第三個值控制下 左邊找右邊 padding:1px 2px 3px 4px 四個值表示每個值單獨控制上右下左2、外邊距
margin（外邊界） 屬性介紹 margin-bottom auto 自動調整空隙 長度/百分比 設置下端空隙 margin-left auto 自動調整空隙 長度/百分比 設置左端空隙 margin-right auto 自動調整空隙 長度/百分比 設置右端空隙 margin-top auto 自動調整空隙 長度/百分比 設置上端空隙簡化方案：
margin:2px 4px margin:2px 6px 10px margin:1px 2px 3px 4px <style type="text/css"> div{width:200px;height:200px;background-color:#0F0;margin:100px;padding:10px; } body{margin:0px; } </style> </head> <body> <div>6、你不能當飯吃，但沒有你，我吃不下飯。 7、要有多大的身軀，才能撐起您那齷齪的靈魂啊！ 8、做男人的最高境界不是你去泡妞，而是讓妞來泡你。 9、有心才會累，無心者無所謂。 </div> </body>二、CSS控制邊框
1、設置邊線的樣式：border-style
none 不顯示邊線 dotted 點線 dashed 虛線 solid 實線 double 雙線2、設置邊線的長度(即邊框的粗細)：border-width
像素 百分比3、設置邊線的顏色：border-color
簡化格式：長度 樣式 顏色 設置邊線的顏色和長度之前必須先設置邊線的樣式 因為邊線樣式默認是none不顯示邊線的 <style type="text/css"> img{border-style:solid dotted double;border-color:#0F0 #C00 #FF0 #00F;border-width:10px; } </style> </head> <body> <img src="../../../素材庫/biaoqing4.png"/> </body>總結
以上是生活随笔為你收集整理的css控制边界与边框示例(内边距、外边距使用方法)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何修改cmd控制台默认编码为utf-8
- 下一篇： Spring注解大全（示例详解）