盒子的內容

2021-10-01 14:29:23 字數 837 閱讀 5022

padding叫做內間距,它可以調整盒子與內容之間的間距,它也有上下左右四個方向,所以有padding-top(上內間距) padding-bottom(下內間距) padding-left(左內間距) padding-right(右內間距)

既然我們已經知道了padding可以調整內容和盒子之間的間距,我們來看看單獨四個方向的padding怎麼設定?

1.1 padding-top的設定

padding 為內間距 主要是用來調整盒子中的內容與盒子之間的距離 分為上下左右四個方位

padding-top padding-bottom padding-left padding-right

讓盒子中的內容向下調整

寬度會變成202px 設定的寬度200px+左右邊框名1px=202px 高度會變成232px 設定的高度為200px+padding調整的30px+上下邊框名1px=232px

padding的設定會拉大盒子的大小

設定右間距

padding-right:30px

padding屬性可以代替四個方位

可以設定為1個值兩個值三個值四個值

4個值得情況 四個值分別代表是上間距 右間距 下間距 左間距順時針方向

padding:20px 40px 50px 60px

乙個值得情況 代表上下左右方向的間距都是一樣的

padding:30px;

兩個值 第乙個值是上下間距第二個值是左右間距

padding:20px 50px

三個值得情況 第乙個值代表的是上間距 第二個是左右間距 第三個是下間距

padding:20px 50px 60px

彈性盒子內容體居右對其 彈性盒子常用屬性

新增瀏覽器字首 webkit 也可用postcss自動新增 display webkit flex 如果用了彈性布局,子元素不需要浮動,webkit justify content 子元素水平排列方式方式。center 水平居中 space between 兩端對齊 space around 手拉手...

css美化網頁基礎內容與盒子模型

字型 文字 和 background 字型屬性 font family 型別 font size 大小 font style風格 font weight 粗細 font italic bolder 20px 宋體 color不能寫在font裡面 文字屬性 color red text align 設...

IPTV盒子和OTT盒子的區別

ott over the top,通過網際網路向使用者提供各種應用服務 iptv internet protocol television,網際網路協議電視 技術上的區別 ott是走的公網,也就是通過ip網路連線網際網路,和你電腦上網是同一張網。iptv是走的私網,也是通過ip網路,但沒有連線網際網...