亚洲欧洲国产欧美一区精品,激情五月亚洲色五月,最新精品国偷自产在线婷婷,欧美婷婷丁香五月天社区

      考試首頁(yè) | 考試用書 | 培訓(xùn)課程 | 模擬考場(chǎng) | 考試論壇  
        當(dāng)前位置:設(shè)計(jì)制作 > CSS/HTML > 文章內(nèi)容
        

      CSS基礎(chǔ)教程:CSS內(nèi)邊距

       [ 2016年4月19日 ] 【

      元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間?刂圃搮^(qū)域最簡(jiǎn)單的屬性是 padding 屬性。

      CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。

      CSS padding 屬性

      CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長(zhǎng)度值或百分比值,但不允許使用負(fù)值。

      例如,如果您希望所有 h1 元素的各邊都有 10 像素的內(nèi)邊距,只需要這樣:

      h1 {padding: 10px;}

      您還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距,各邊均可以使用不同的單位或百分比值:

      h1 {padding: 10px 0.25em 2ex 20%;}

      單邊內(nèi)邊距屬性

      也通過(guò)使用下面四個(gè)單獨(dú)的屬性,分別設(shè)置上、右、下、左內(nèi)邊距:

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

      您也許已經(jīng)想到了,下面的規(guī)則實(shí)現(xiàn)的效果與上面的簡(jiǎn)寫規(guī)則是完全相同的:

      h1 {
        padding-top: 10px;
        padding-right: 0.25em;
        padding-bottom: 2ex;
        padding-left: 20%;
        }
      

      內(nèi)邊距的百分比數(shù)值

      前面提到過(guò),可以為元素的內(nèi)邊距設(shè)置百分?jǐn)?shù)值。百分?jǐn)?shù)值是相對(duì)于其父元素的 width 計(jì)算的,這一點(diǎn)與外邊距一樣。所以,如果父元素的 width 改變,它們也會(huì)改變。

      下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%:

      p {padding: 10%;}

      例如:如果一個(gè)段落的父元素是 div 元素,那么它的內(nèi)邊距要根據(jù) div 的 width 計(jì)算。

      This paragragh is contained within a DIV that has a width of 200 pixels.

      注意:上下內(nèi)邊距與左右內(nèi)邊距一致;即上下內(nèi)邊距的百分?jǐn)?shù)會(huì)相對(duì)于父元素寬度設(shè)置,而不是相對(duì)于高度。

      將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動(dòng)訪問(wèn)考試網(wǎng) | 復(fù)制本頁(yè)地址,傳給QQ/MSN上的好友 | 申請(qǐng)鏈接 | 意見(jiàn)留言 TOP
      關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
      Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved