Css樣式表中 margin paddi

2021-07-09 01:47:43 字數 1188 閱讀 7158

css樣式表中:margin、padding和border

相淋 樣式表的精髓:margin和padding和border

一、padding

我們可以把加過樣式表的html標記看成是乙個盒子。

對這個盒子中的內容控制,用到的樣式:padding

它又分為:padding-left、padding-right、padding-bottom、padding-top

padding是什麼意思可以看作是我這個盒子裡面的東西和盒子周圍的距離。

例如我今天下午遇到的乙個問題:如何把乙個按鈕上的文字顯示到按鈕的正**來,可以給這個按鈕的padding樣式進行設定:padding-top=5px;就可以看到效果了。

注意:如果這個標記太小,看不到效果,因為padding是對標記裡面的內容起作用的乙個標記。

例如用padding實現對乙個按鈕的操作:

**:

二、margin

我們還是把乙個html標記看成是乙個盒子。既然padding是這個盒子裡面的內容(或是數字漢字一類、或是),那麼margin就是用來設定這個盒子和周圍的盒子的內容之間的距離

margin:是這個盒子和周圍盒子(html標記)的距離:margin-left、margin-right、margin-top、margin-bottom

這個例子:比如說我們看到的一些書上的文字,每一段文字可以使乙個p標記,可以看成是乙個盒子,對這個盒子和周圍的盒子(段落p標記)進行操作,比如每段文字之間可以隔多少的間距,就可以用margin來實現。

三、border

我的部落格上時常用到border樣式表。

用border可以實現的效果:例如給乙個普通的textbox的border加上點效果:

這是沒有加上border樣式表的效果:

加上樣式表的效果style="border:solid 5px black";==>效果:

style="border:solid 5px red"

簡單解釋一下border後面這幾個引數的意思:第乙個是border的樣式、第二個是border的粗細(用畫素px來表示)、第三個是border的顏色。

border的三個屬性

可以單獨設:border-style 

border-width 

border-color

例如:

css樣式表的精華還需要我慢慢的研究下去,今天先介紹這麼多。

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

CSS常用樣式表

常用的文字屬性 1.line height 設定行號,常用25px 28px 例 line height 25px 布局多行文字 2.text align 設定對齊方式,常用取值為left right center 例 text align center 各種元素對齊 3.letter spacin...

CSS層疊樣式表

一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊,並根據它來格式化文件 ...