1. 程式人生 > >屬性padding和margin的區別

屬性padding和margin的區別

因為實際在使用中經常會遇到還是很容易搞混,不知道該如何去選擇邊距的情況,所以單獨把這個課題拎出來調查,實踐了一番。

1. margin,指的是當前控制元件和父控制元件的邊距。

舉一個例子說明:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#000000">//第一層佈局①背景全黑色,並且高和框都是match_parent
  <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#FFFFFF"//第二層佈局②設定為全白,並且設定和父控制元件的邊距30dp
    android:layout_marginLeft="30dp"
>     <EditText android:text="Hello World!"//文字框背景是黑色的,文字是白色的。       android:layout_width="match_parent"//距離父控制元件(也就是第二層佈局是60dp)       android:layout_height="wrap_content"       android:background="#000000"       android:layout_marginLeft="60dp"       android:textColor="#FFFFFF" />   </RelativeLayout> </RelativeLayout>

2. padding,指的是當前控制元件的內邊距,即控制元件中內容距離控制元件的邊緣的距離。

同樣舉一個例子說明:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#000000">		//第一層佈局①背景全黑色,並且高和框都是match_parent
  <EditText android:text="Hello World!"
    android:layout_width="wrap_content"		//文字框背景是白色的,文字是黑色的。
    android:layout_height="wrap_content"		//寬度隨內容變化
    android:background="#FFFFFF"
    android:layout_marginLeft="60dp"
    android:paddingLeft="30dp"
//設定文字內容距離EditText的左邊框是30dp android:paddingRight="60dp" //設定文字內容距離EditText的右邊框是60dp android:textColor="#000000" /> </RelativeLayout>

從例子上來看,EditText的寬度因為是隨內容變化,所以實際寬度是距離左邊框的30dp+“Hello World!"文字寬度+距離右邊框60dp 三者合在一起的寬度。


3. 以上兩個例子基本上可以理解了margin和padding的區別,但是這裡引入了一個問題,如何設定兩個控制元件之間的距離呢?
   這裡我的理解是,對於不同的佈局有不同的方法,說法很奇怪,還是以例子進行說明吧。


對於RelativeLayout來說,本來就是相對佈局,所以它在控制控制元件和控制元件之間的位置有很多屬性可以使用,常用的有以下:
3-1. 相對於父佈局定位的屬性(屬性可以結合使用,分別實現左上角,右上角,左下角,右下角等方位)對應的值只有true和false
android:layout_alignParentLeft靠左
android:layout_alignParentTop靠上
android:layout_alignParentRight靠右
android:layout_alignParentBottom靠下
android:layout_centerInParent居中
3-2. 相對於控制元件定位的屬性(屬性可以結合使用,分別實現左上角,右上角,左下角,右下角等方位)因為是相對控制元件定位,所以對應的值是對應控制元件的id
android:layout_toLeftOf左邊
android:layout_above上方
android:layout_toRightOf右邊
android:layout_below下方
3-3. 其他一些屬性
android:layout_alignLeft="@id/xxx"將控制元件的左邊緣和給定ID控制元件的左邊緣對齊
android:layout_alignRight="@id/xxx"將控制元件的右邊緣和給定ID控制元件的右邊緣對齊
android:layout_alignTop="@id/xxx"將控制元件的上邊緣和給定ID控制元件的上邊緣對齊
android:layout_alignBottom="@id/xxx"將控制元件的底邊緣和給定ID控制元件的底邊緣對齊
android:layout_toLeftOf="@id/xxx"將控制元件的右邊緣和給定ID控制元件的左邊緣對齊
android:layout_toRightOf="@id/xxx"將控制元件的左邊緣和給定ID控制元件的右邊緣對齊
android:layout_centerHorizontal="true"將控制元件置於水平方向的中心位置
android:layout_centerVertical="true"將控制元件置於垂直方向的中心位置
android:layout_alignParentLeft="true"將控制元件的左邊緣和父控制元件的左邊緣對齊
android:layout_alignParentTop="true"將控制元件的上邊緣和父控制元件的上邊緣對齊
android:layout_alignParentRight="true"將控制元件的右邊緣和父控制元件的右邊緣對齊
android:layout_alignParentBottom="true"將控制元件的底邊緣和父控制元件的底邊緣對齊

舉一個例子說明:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#000000">
  <EditText
    android:id="@+id/helloworld"
    android:text="Hello World!"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:layout_marginLeft="30dp"
    android:textColor="#000000" />
  <EditText android:text="你好!"		//設定layout_toRightOf
    android:layout_width="wrap_content"		//讓它顯示在第一個EditText框的右邊
    android:layout_height="wrap_content"	//然後結合margin設定邊距
    android:layout_toRightOf="@id/helloworld"
    android:background="#FFFFFF"
    android:layout_marginLeft="60dp"
    android:textColor="#000000" />
</RelativeLayout>


=============================================================================

對於LinearLayout來說,控制兩個控制元件之間的距離我認為還是使用margin。
因為LinearLayout本來就是線性排列,所以只需要設定margin就可以了。
例如:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">
    <EditText
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_marginLeft="30dp"
        android:textColor="#000000" />
    <EditText
        android:text="你好!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:layout_marginLeft="60dp"
        android:textColor="#000000" />
</LinearLayout>
注意一點:如果LinearLayout是水平排列的,使用的是marginLeft和marginRight。
        如果是垂直排列的,使用的是marginTop和marginBottom。
        如果只使用的是margin,那就是四個方向全部都設定了邊距。



相關推薦

屬性paddingmargin區別

因為實際在使用中經常會遇到還是很容易搞混,不知道該如何去選擇邊距的情況,所以單獨把這個課題拎出來調查,實踐了一番。 1. margin,指的是當前控制元件和父控制元件的邊距。 舉一個例子說明: <RelativeLayout xmlns:android="http

HTML中paddingmargin區別用法

布局 語法 tom mil strong 替換元素 它的 一段 div   margin(外邊距) 定義:margin是用來隔開元素與元素的間距,發生在元素本身的外部,margin用於布局分開元素使元素與元素互不相幹。 提示:margin: top right bottom

paddingmargin區別作用及各種場合出現的bug

absolut 之間 包括 net 無法 pfile .com 20px http 一、padding Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, conte

Android中的paddingmargin區別

區別 you content and bsp schema out ring http 在Android的布局中,常常有人將padding和margin搞混,他們其實不一樣的,padding是該控件的內部距離。 magin是該控件與其他控件之間的距離。例如 <Line

paddingmargin區別

在android的佈局中,為了調整佈局檔案的位置,經常會看到各種的padding和margin屬性,對於這兩個屬性所起到的作用,都是調整控制元件在佈局中距離四個邊界的距離,但是注意,padding是作用於該控制元件內部的自控制元件,用於調控該控制元件內部子控制元件距離它的四邊的距離的,而

Android中控制元件的paddingmargin屬性的使用

Android中的padding和margin是佈局中比較常用的兩個屬性,主要是用來設定邊距的。 margin:如果給某個控制元件B設定了margin屬性,那實際上就是設定了控制元件B距離他的父控制元

【修真院web小課堂】paddingmargin區別

大家好,我是IT修真院西安分院第二期學員,一枚正直善良的web程式設計師。今天給大家分享一下,修真院官網CSS-1任務中可能會使用到的知識點:1.背景介紹什麼是MARGIN 什麼是PADDING我們在進行網頁製作時都會遇到為元素設定邊距的情況,邊距又分為內邊距和外邊距,即ma

行內元素可以設置paddingmargin

行內元素 padding第一:行內元素與寬度寬度不起作用span {width:200px;}沒有變化 第二:行內元素與高度高度不起作用span{height:200px;}沒用變化 第三:行內元素與padding,marginspan{padding:200px;}影響左右,不影響上下 行內元素(inlin

Android零基礎入門第27節:正確使用paddingmargin

http://www.cnblogs.com/cqkxzsxy/p/7299147.html 前面兩期我們學習了LinearLayout線性佈局的方向、填充模型、權重和對齊,那麼本期我們來學習LinearLayout線性佈局的內邊距和外邊距。 關於padding和margin,很多同學傻傻分

移動端paddingmargin的百分比設定實現佔位

資源請求和載入都是需要時間的。對於圖片一些內容的展示,當圖片沒有加載出來時。容器高為零,那麼下面的dom元素會上移。當圖片載入後,會容器撐開。這樣會造成頁面的重排。 為了解決以上問題我們可以使用padding的百分比佔位實現(或者margin)。 讓我們把padding這

理解paddingmargin,等於理解了盒子模型

導讀 如果你在找有關盒子模型的理解問題,那麼花上幾分鐘來看看,我會用通俗易懂的方法儘可能地把它講清楚。 可能很多人覺得,前端的難點大概就在於JavaScript和各種框架了,但是真正被CSS支配過的人會明白,CSS從使用上,難度甚至比JS還高。尤其是佈局中對盒子模型的理解,直

CSS利用paddingmargin正負相消實現多列等高

什麼是等高佈局? 先來看一個案例:   上圖中的頁面的主體內容是兩列結構,左列是用來導航的,右列是用來顯示內容的。我們看到它們有一個共同的邊框,中間還有一條分隔線,左右兩列的高度都是不固定的。這種情況下就需要兩列的高度保持一致了,左邊高度增加,右邊也跟著增加,右邊高度增加,左邊同樣也要增加,否則就會出現“斷

HTML邊距設定之paddingmargin

在CSS中margin是指從自身邊框到另一個容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離,就是容器內距離。       下面講解 padding和margi

動態設定view的paddingmargin值,TextView drawLeft drawRight

1、動態設定padding,拿ImageView為例 ImageView imageView = new ImageView(Context context); imageView.setPa

動態設定view的paddingmargin

1.動態設定padding,拿ImageView為例: Java程式碼   ImageView imageView = new ImageView(Context context);  im

html padding margin

在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的尺寸。假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素,就需要將內容的寬度設定

android:paddingandroid:margin區別

若有 enter 內容 分享圖片 nsh strong vertica 一段 分析 看了網上的類似博客,並沒有給出確定的區別。現在具體分析一下padding和android:margin的區別 首先看一張圖: 顧名思義。padding為內邊距;margin為外邊距。 安卓的

margin、borderpadding之間的區別

問題描述:          margin叫邊界手冊上叫外補丁,padding是填充內補丁,在他們之間有一個邊界border。padding包圍的就是content,那麼這個盒子是不是就是最外層的div,按照從外到內,margin,border,padding,conten

java中如何使用空參構造方法自動生成不同名字的對象,使用非靜態的屬性靜態屬性有什麽區別,原因是什麽?如何理解static關鍵字

區別 關鍵字 內部 方法 屬性 count per setname person 空參構造自動生成對象時,使用非靜態的屬性 代碼: package com.swift; //使用無參構造方法自動生成對象,序號不斷自增 public class Person { p

vertical-align負值margin-bottom負值的區別

ica clas 這一 width tro true utf class 怎樣 先看一下vertical-align在W3C當中的值有哪一些: 可是它有數值這一說確實很少提起,我們來看這麽一段代碼: <!DOCTYPE html> <html