web-dev-qa-db-ja.com

ビューの余白と余白の違い

ビューのマージンとパディングの違いは何ですか?

541

padding の意味を思い出すのに役立つように、 厚い綿のパディング がたくさんある大きなコートを考えます。私はコートの中にいますが、私と私のパッド入りコートは一緒です。私たちはユニットです。

しかし、 margin を覚えておくと、 " ちょっと、ちょっとマージンをくれ! "それは、私とあなたの間の空白なのです。私の快適ゾーン - 私のマージンの内側に入ってはいけません。

より明確にするために、これはTextView内のパディングとマージンの図です。

enter image description here

上の画像のxmlレイアウト

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:background="#c5e1b0"
        Android:textColor="#000000"
        Android:text="TextView margin only"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:background="#f6c0c0"
        Android:textColor="#000000"
        Android:text="TextView margin only"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="#c5e1b0"
        Android:padding="10dp"
        Android:textColor="#000000"
        Android:text="TextView padding only"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="#f6c0c0"
        Android:padding="10dp"
        Android:textColor="#000000"
        Android:text="TextView padding only"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:background="#c5e1b0"
        Android:textColor="#000000"
        Android:padding="10dp"
        Android:text="TextView padding and margin"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_margin="10dp"
        Android:background="#f6c0c0"
        Android:textColor="#000000"
        Android:padding="10dp"
        Android:text="TextView padding and margin"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="#c5e1b0"
        Android:textColor="#000000"
        Android:text="TextView no padding no margin"
        Android:textSize="20sp" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="#f6c0c0"
        Android:textColor="#000000"
        Android:text="TextView no padding no margin"
        Android:textSize="20sp" />

</LinearLayout>

関連する

532
Suragch

パディング はボーダーの内側、ボーダーと実際のビューのコンテンツの間のスペースです。パディングはコンテンツの周囲を完全に囲むことに注意してください。上下左右にパディングがあります(これは独立している場合があります)。

余白 は、境界線の外側、境界線とこのビューの横にある他の要素との間のスペースです。画像では、マージンはオブジェクト全体の外側のグレーの領域です。余白は、パディングと同様に、コンテンツの周囲を完全に一周します。上、下、右、および左に余白があります。

画像には1000語以上の単語が含まれています( 余白とパディング - CSSのプロパティ から抽出)。

alt text

570
Cristian

パディングはビューの内側にあります。

マージンはビューの外側です。

この違いは、背景やサイズのプロパティに関連している可能性があります。

71
Floern

パディングはビュー内にあり、マージンは外側にあります。パディングはすべてのビューで利用可能です。ビューによっては、パディングとマージンの間に視覚的な違いがある場合とない場合があります。

たとえばボタンの場合、特性ボタンの背景画像には余白は含まれませんが余白は含まれません。つまり、余白を追加するとボタンの外観が大きくなり、余白を追加するとボタンと次のコントロールの間隔が広くなります。

一方、TextViewsの場合、パディングとマージンの視覚効果は同じです。

マージンが使用可能かどうかは、ビュー自体ではなく、ビューのコンテナーによって決まります。 LinearLayoutではmarginがサポートされ、AbsoluteLayoutでは(現在は時代遅れと考えられています) - いいえ。

41
Seva Alekseyev

下の画像では、余白と余白がわかります。

enter image description here

23
Akshay Paliwal

場合によっては、パディングOR marginでのみ再生しても同じ結果が得られることがあります。例:

ビューXにビューYが含まれているとします(別名:ビューYはビューXの内側にあります)。

- 余白= 30でビューY ORパディング= 30でビューXは同じ結果になります。ビューYのオフセットは30です。

7
Akli

パディングは、境界と実際の画像またはセルの内容との間の境界内のスペースです。マージンとは、ボーダーの外側、ボーダーとこのオブジェクトの横にある他の要素との間のスペースです。

7
raja

パディングとは、ウィジェットとウィジェットの元のフレームの間のスペースを意味します。ただし、マージンは、ウィジェットの元のフレームと他のウィジェットのフレームの境界との間のスペースです。 enter image description here

7
Ananthakrishnan

パディング
パディングはViewの内部にあります。例えばAndroid:paddingLeft=20dpを指定すると、ビュー内の項目は左から20dpの幅で配置されます。右からパディングを与えるためにpaddingRightpaddingBottompaddingTopを使用することもできます。それぞれ下と上。

マージン
マージンはViewの外側です。たとえば、Android:marginLeft=20dpを指定すると、ビューは左から20dpの後に配置されます。

7
jinosh

ビューにボタンがあり、ビューのサイズが200 x 200、ボタンのサイズが50 x 50、ボタンのタイトルがHTであるとします。マージンとパディングの違いは、ビュー内のボタンのマージンを設定できることです。たとえば、左から20、上から20、パディングはボタンまたはテキストビューなどのテキスト位置を調整します。パディング値は左から20なので、テキストの位置を調整します。

3
Steve

マージンとは、要素の外側にある余分なスペースのことです。パディングは、要素内の余分なスペースを指します。余白は、コントロールの周囲の余分なスペースです。パディングは、コントロール内の余分なスペースです。

マージンとパディングの違いを白い塗りつぶしで見分けるのは困難ですが、色付き塗りつぶしを使用するとうまく表示できます。

2

簡単に言うと:
パディングはボックスのサイズを変更します(何かを含む)。
マージンは異なるボックス間のスペースを変更します

1
user4702646

簡単に言うと:

  1. パディング - ビューの境界線の内側にスペースを作成します。
  2. マージン - ビューの境界線の外側にスペースを作成します。
0
mohammed nathar

上記のすべての正解に加えて、もう1つの違いは、 paddingビューのクリック可能領域が増えますが、 margin はしません)です。これは便利です。小さいクリック可能な画像ですが、クリックハンドラを寛容にしたいです。

たとえば、ImageView100dpに設定したpaddingBotton(Androidアイコン)のレイアウトのこの画像を参照してください(画像はストックランチャーミップマップic_launcherです)。付属のクリックハンドラを使用して、画像の外側と下部をクリックしてもクリックを登録できました。

enter image description here

0
scorpiodawg