1. 程式人生 > >css權威指南(8):內邊距、邊框和外邊距

css權威指南(8):內邊距、邊框和外邊距

寬度和高度
1.一個元素的width被定義為從做內邊界到右內邊界的距離,height被定義為上邊界到下邊界的距離。
2.這兩個屬性很重要的一點是:它們不能應用到行內非替換元素。
3.如果在行內非替換元素聲明瞭width和height,瀏覽器會忽略。

外邊距 margin
值:<length> | <precentage> | auto | inherit
1.瀏覽器對許多元素已經提供了預定的樣式,外邊距也不例外。
2.對外邊距的設定可以為百分數。百分數是相對於父元素的width計算的。這不僅應用於左右外邊距,也應用於上下外邊距。
3.負外邊距和外邊距的合併可以見上一節。
4.外邊距還可以應用到行內元素,不過效果稍有不同。為行內替換元素設定margin-top,margin-bottom,並不生效。因為向一個行內非替換元素應用外邊距,它對行高並沒有影響。為行內替換元素設定margin-left,margin-right,會生效。行內替換元素又不同:為替換元素設定的外邊距會影響行高,可能使行高增加或減少。所以margin-top,margin-bottom,margin-left,margin-right都會生效。

內邊距 padding
值:<length> | <precentage> | auto | inherit
1.預設的,元素沒有內邊距
2.可以為元素的內邊距設定百分值,像外邊距一樣,百分數值要相對於其父元素的width計算。
3.如果為行內非替換元素設定了內邊距,則左右內邊距是生效的。對於有背景色和內邊距的行內非替換元素,背景可以向元素上面和下面延伸。對於行內替換元素,內邊距都會生效。

相關推薦

css權威指南8:邊框外邊

寬度和高度 1.一個元素的width被定義為從做內邊界到右內邊界的距離,height被定義為上邊界到下邊界的距離。 2.這兩個屬性很重要的一點是:它們不能應用到行內非替換元素。 3.如果在行內非替

jQuery獲取元素寬高邊框外邊

返回元素的寬、高。 width() height() 返回元素的寬、高(包括內邊距)。 innerWidth() innerHeight() 返回元素的寬度(包括內邊距和邊框)。 outerW

CSS進階8—— 聯元素的掌管者line-heightvertical-align

  上一章主要講了line-height相關的知識,本章就來聊聊同樣無處不在的vertical-align。vertical-align和line-height一樣,都會影響元素在與水平流垂直方向上的表現,因此瞭解這兩個屬性,對於我們控制圖文在垂直方向上的表現有很大的幫助。這裡我用了"

css權威指南10:浮動定位

浮動 float 值:left | right | none | inherit 1.css允許浮動任何元素 浮動元素 1.會以某種方式將浮動元素從文件的正常流中刪除,不過它還是會影響佈局 2

讀書筆記--Android Gradle權威指南

說了 聲明 通過命令 google robot 結構 信息 我只 cati 最近看了一本書《Android Gradle 權威指南》,對於 Gradle 理解又更深了,但不想過段時間就又忘光了,所以打算寫一篇讀書筆記,將書中一些我個人覺得蠻有用的點記錄、總結一下。 前言 首

標號8:python(就業階段)——htmlcss入門

<1>html概述及html文件基本結構   1、html概述  HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文字標記語言,是一種用來製作網頁的語言,這種語言由一個個的標籤組成,用這種語言製作的檔案儲存的是一個文字檔案,

pythone函式基礎8建函式學習

內建函式學習# sorted# map# filter# max# sum# round# chr# ord# dir# bool# eval# exec# zipimport mathres = max([1,2,3,4])res = sum(range(1,101))# print(chr(66)) #把

Android程式設計權威指南3ed挑戰練習遇到的問題

第十二章,練習2,將DatePickerFragment用Activity託管,程式碼寫的和網上的論壇上的幾乎一樣,就是在點選日期button時,顯示“很抱歉,CriminalIntent無響應”,然後應用退出。開始以為是和書上的程式碼不一樣,版本不一樣,資料庫操作之類的問題,後來把書上本章節的程式碼和論壇

Asp.Net MVC4入門指南8:給資料模型新增校驗器

在本節中將會給Movie模型新增驗證邏輯。並且確保這些驗證規則在使用者建立或編輯電影時被執行。 保持事情 DRY ASP.NET MVC 的核心設計信條之一是DRY: "不要重複自己(Don’t Repeat Yourself)"。ASP.NET MVC鼓勵您指定功能或者行為,只做一次,然後將它應用到應用

CSS設計指南1

1.為文件新增樣式的三種方法 (1)嵌入樣式<style>p{color:red;}</style> (2)行內樣式<p style="color:blue">this is a <em>emphasis</em>

Maven權威指南之多模組專案構建及POM優化

  在《Maven權威指南》部分I中,第6、7章介紹了多模組專案及多模組企業級專案的構建思想。對於多模組的情況,無論是簡單的或是企業級的,對於POM來說,重點就是分析處理好父POM與子POM之間的關係,包括依賴管理(DependencyManagement)、外掛管理(Plu

CSS進階7—— 聯元素的掌管者line-heightvertical-align

  在CSS世界中,塊級元素一般負責結構,而內聯元素則負責文字內容,而CSS設計的初衷就是面向圖文混合排版,因此內聯元素在CSS世界中有著非常重要的地位。由於本章內容較多,因此特分為上下兩章,依舊可以根據興趣按小標題獲取你所需要的資訊。 1.字母x與CSS世界的基線 2.內聯元

javascript權威指南6隨筆

        包裝物件:存取字串、數字或布林值的屬性時,建立的臨時物件稱作包裝物件。它只是偶爾用來區分 字串值和字串物件,數值和數值物件,布林值和布林物件。通常,包裝物件只是被看做是一種實現細節,而不用特別關注。由於字串、數值、布林值的屬性都只

WinPcap權威指南:UDP與DNS欺騙

       上一節介紹了ARP協議之後,群裡面有朋友說ARP欺騙不是很簡單麼?實際上,實現ARP欺騙是很簡單的,難點在於資料轉發的速度。2004年我們做隔山打牛的時候,曾經去過一家網咖測試,剛開始是開了ARP欺騙幾分鐘就大量主機掉線,客人罵聲一片(幸好是朋友的網咖,

ASP.NET Core 中文文件 第二章 指南8 使用 dotnet watch 開發 ASP.NET Core 應用程式

本文已更新,最後更新於2017年4月27日 以下為老翻譯存檔 介紹 dotnet watch 是一個開發階段在原始檔發生變動的情況下使用 dotnet 命令的工具。 當代碼發生變動的時候可以用來執行編譯,執行測試,或者釋出操作。 在本教程中,我們將使用一個現有的計算兩個數字之和以及乘積的 WebAp

symfony權威指南3之symfony配置

在開始閱讀本文之前建議先閱讀筆者之前的一篇博文 yaml檔案的語法及注意事項,瞭解一些關於yaml方面的相關知識。 第一次接觸symfony的人可能會不太習慣symfony的配置檔案,因為symfony的配置檔案實在是太多了,而且還分了很多的層級,不過相信隨著後期學習的深

【WEB基礎】HTML & CSS 基礎入門8表單

前面 前面我們已經熟悉了網頁上一些常見的元素,如在網頁上顯示一段文字、一張圖片、一個列表、一張表格等等。這些東西都是事先編輯好顯示在頁面上只提供給使用者看的,實際上,我們可以把這樣的頁面稱之為靜態頁面。有“靜”就有”動”,自然也就有了動態頁面,所謂動態頁面就是

圖解HTTP權威指南| 連線管理

      一、兩個問題 1、HTTP是如何使用TCP連線的 2、HTTP的連線,並行連線、keep-alive(持久連線)和管道化連線   二、TCP連線 1、什麼是TCP   TCP/IP是全球計算機及網路裝置都在使用的一種常用的分組交換網路層協議分層協

圖解HTTP權威指南| Web伺服器對HTTP請求的處理響應

作者簡介   李先生(Lemon),高階運維工程師(自稱),SRE專家(目標),夢想在35歲買一輛保時捷。喜歡鑽研底層技術,認為底層基礎才是王道。一切新技術都離不開作業系統(CPU、記憶體、磁碟)、網路等。堅持輸入輸出,記錄自己學習的點滴,在平凡中堅持前行,總有一天會遇見不一樣的自己。公眾號:運維

圖解HTTP權威指南| 代理

作者簡介 李先生(Lemon),高階運維工程師(自稱),SRE專家(目標),夢想在35歲買一輛保時捷。喜歡鑽研底層技術,認為底層基礎才是王道。一切新技術都離不開作業系統(CPU、記憶體、磁碟)、網路等。堅持輸入輸出,記錄自己學習的點滴,在平凡中堅持前行,總有一天會遇見不一樣的自己。公眾號:運維汪(ID:Le