1. 程式人生 > >css中margin和padding的使用

css中margin和padding的使用

1、設定屬性方法

   margin和padding都是用來隔開元素,margin用於佈局元素使元素與元素互不相干,padding是用於元素與內容之間的間隔。元素四邊可以設定的屬性:margin-top,margin-right,margin-bottom,margin-left,padding-top,padding-right,padding-bottom和padding-left。還可以按照上、右、下、左的順序分別設定各邊的邊距,各邊均可以使用不同的單位或百分比值:比如p{padding:10px 0.25em 2ex 20%}.

2、什麼時候用margin,什麼時候用padding

   margin和padding在許多地方往往達到的效果都是一模一樣的,所以有時我們會迷惑margin和padding應當什麼時候用哪個比較好。

何時應當使用margin:

(1)需要在border外側新增空白時,

(2)空白處不需要有背景(色)時,

(3)上下相連的兩個盒子之間的空白需要相互抵消時,比如15px+20px的margin,將得到20px的空白(注意地方見第三點)。

何時應當使用padding

(1)需要在border內側新增空白時(往往是文字與邊框距離的設定),

(2)空白處需要背景(色)時,

(3)上下相連的兩個盒子之間的空白希望等於兩者之和時,比如15px+20px的padding,將得到35px的空白。

3、margin使用時應該注意的地方

margin在垂直方向上相鄰的值相同時會發生疊加,水平方向上相鄰的值會相加。margin取負值時,在垂直方向上,兩個元素的邊界仍然會重疊。但是,此時一個為正值,一個為負值,並不是取其中較大的值,而是用正邊界減去負邊界的絕對值,也就是說,把正的邊界值和負的邊界值相加。


相關推薦

CSSmarginpadding的區別

ng- str 技術分享 gin es2017 alt bsp 繼承 單位 padding margin都是邊距的含義,關鍵問題得明白是什麽相對什麽的邊距.padding是控件的內容相對控件的邊緣的邊距.margin是控件邊緣相對父空間的邊距. 在CSS中margin是指從

cssmarginpadding的使用

1、設定屬性方法    margin和padding都是用來隔開元素,margin用於佈局元素使元素與元素互不相干,padding是用於元素與內容之間的間隔。元素四邊可以設定的屬性:margin-top,margin-right,margin-bottom,margin-l

CSSIE火狐對marginpadding的相容性解析

CSS對瀏覽器器的相容性具有很高的價值,通常情況下IE和Firefox存在很大的解析差異,這裡介紹一下相容要點。 常見相容問題:1.DOCTYPE 影響 CSS 處理2.FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行3.FF: body 設定

CSS深入之其實你可能根本不認識marginpadding(一)

1.我們來解析官方的margin是怎麼個說法 margin屬性可以為給定元素設定所有四個(上下左右)方向的外邊距屬性。四個外邊距屬性設定分別是: margin-top, margin-right, margin-bottom 和 margin-left 。指定

cssmarginpadding佈局定位

         個人心得:在一個頁面中首先要分清整個頁面總共分為多少小塊,從外到內,一層一層分割,由大到小,理清包含關係,本人初學者,剛學到這,個人覺得只要思路正確,能分清哪一部分需要div,哪些部

為什麽css一開始需要設定marginpadding為 0px?

有一點 ros 做了 清除 adding 過多 事情 塊元素 ont 我們在寫HTML的時候,通常會在樣式裏先寫上一些像body、a、ul li等這些標簽的全局的一些樣式。之所以有這樣的習慣,主要是是因為以下幾點:   首先:瀏覽器兼容。我們做的網頁是給用戶看的,我們只負責

cssmargin-top或者margin-bottom失效

text margin for lin over oat display ati tab css中margin-top是設置容器的外間距了距離了,div嵌套後,margin-top或者margin-bottom失效了,在網上打到下面的方法可以解決。 設計頁面的時候

cssemrem的區別

子元素 字體大小 響應式布局 布局 height root html中 頁面 長度單位 在css中單位長度用的最多的是px、em、rem,這三個的區別是:1.px是固定的像素,一旦設置了就無法因為適應頁面大小而改變。2.em和rem相對於px更具有靈活性,他們是相對長度單位

有關於marginpadding的練習

itl tle 容器 tex -- gre set com order ---恢復內容開始--- margin指的是邊框與邊框之間的距離指的是容器外距離。padding指的是自身邊框到自身內部另一個容器邊框之間的距離指的是容器內距離。所以我進行了以下一個練習: 將

cssbeforeafter的應用實例

padding meta script cli fff radi tag lock style <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

marginpadding的用法與區別--以及bug處理方式

使用 滿足 左右 ron 相互 一段 布局 方式 ont margin和padding的用法: (1)padding (margin) -left:10px;          左內 (外) 邊距(2)padding (margin) -right:10px;       

愛創課堂每日一題八十九天- CSSlink@import的區別是:

權重 follow ref 樣式 識別 存在 頁面加載 兼容 html標簽 Link屬於html標簽,而@import是CSS中提供的在頁面加載的時候,link會同時被加載,而@import引用的CSS會在頁面加載完成後才會加載引用的CSS

CSS屬性marginpadding的區別

image pad wid com css屬性 設置 class ima 外邊距 原始狀態 不設置margin和padding的狀態 margin 設置外邊距之後的狀態 padding 設置內邊距之後的狀態 ,註意是撐開,外框高寬由300px變成450px

我眼中的marginpadding

web padding margin 俗話說得好,一千個小怪獸裏眼裏就有一千個凹凸曼,一千個碼農眼中的padding和maigin就有一千個。對於剛入行的‘菜農’鄙人來說對於padding和margin著兩個元素來說也有一些小的見解,做一分享,歡迎探討。 1.padding和margin的自我介紹。

CSS可以不可以繼承的屬性

shadow vertical bsp -a ali 體系 color type 水平 一、無繼承性的屬性 1、display 2、文本屬性:vertical-align、text-decoration、text-shadow、white-space空白符的處理 等。 3、

CSSmargin屬性詳解

ces inpu 語法 概述 普通 utf-8 blue 單選按鈕 order margin屬性概述margin是CSS層疊樣式表中用來規定圍繞在元素邊框周圍空白區域範圍的屬性. 該接受任何長度單位,可以是像素、英寸、毫米或 em。 相關屬性margin 可以單獨改變元素的

cssmargin標記可以帶一個、二個、三個、四個引數,各有不同的含義

         在css中使用margin可以將margin-top,margin-right,margin-bottom,margin-left,縮寫為一個標記,順序為上右下左(順時針)。帶不同的引數具有不同的含義,

WEB學習-CSSMargin塌陷

margin的塌陷現象 標準文件流中,豎直方向的margin不疊加,以較大的為準。   如果不在標準流,比如盒子都浮動了,那麼兩個盒子之間是沒有塌陷現象的:      盒子居中margin:0 auto; margin的

WPF Margin Padding

在介面設計時,Margin 和Padding都是對邊距進行限制的,其區別在於“一個主外,一個主內”。 Margin (邊緣)是約束控制元件與容器控制元件的邊距,設定值分別代表左上右下,使用 Margin="20" 同時指定四個值。 Padding (襯墊)是約束控制元件內

淺談css浮動清除浮動帶來的影響

淺談css中浮動和清除浮動帶來的影響 有很多時候,我們都會用到浮動,而我們有時候對浮動只是一知半解,卻不是太清楚它到底是怎麼回事,不知道各位有沒有和我一樣的感覺,只知道用它,卻不知道它到底是怎麼回事,所以,在學習的過程中,就要把一個概念不是很清晰的問題把它弄清楚了,便於我們以後的使用。早些時候,