视图的填充和空白之间的区别。

时间:2023-01-23 22:24:21

What is the difference between a View's Margin and Padding?

视图的边距和边距的区别是什么?

14 个解决方案

#1


485  

To help me remember the meaning of padding, I think of a big coat with lots of thick cotton padding. I'm inside my coat, but me and my padded coat are together. We're a unit.

为了帮助我记住填充物的含义,我想到了一件厚重的棉质大衣。我在外套里面,但是我和我的棉袄在一起。我们是一个单位。

But to remember margin, I think of, "Hey, give me some margin!" It's the empty space between me and you. Don't come inside my comfort zone -- my margin.

但要记住利润,我想,“嘿,给我一点利润!”这是我和你之间的空白。不要进入我的舒适区——我的优势。

To make it more clear, here is a picture of padding and margin in a TextView:

为了让它更清晰,这里有一个TextView中填充和边距的图片:

视图的填充和空白之间的区别。

xml layout for the image above

<?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>

Related

#2


556  

Padding is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).

填充是边界内的空间,介于边界和实际视图的内容之间。注意,填充完全围绕内容:顶部、底部、左右两边都有填充(可以独立)。

Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object. Note that, like the padding, the margin goes completely around the content: there are margins on the top, bottom, right, and left sides.

边缘是边界之外的空间,边界和这个视图旁边的其他元素之间的空间。在图像中,边缘是整个对象外部的灰色区域。注意,就像填充物一样,边缘完全围绕着内容:顶部、底部、右侧和左侧都有空白。

An image says more than 1000 words (extracted from Margin Vs Padding - CSS Properties):

一个图像显示超过1000个单词(从边缘和填充- CSS属性中提取):

视图的填充和空白之间的区别。

#3


66  

Padding is inside of a View.

填充是在视图内部。

Margin is outside of a View.

边际是在一个观点之外。

This difference may be relevant to background or size properties.

这种差异可能与背景或大小属性有关。

#4


40  

Padding is within the view, margin is outside. Padding is available for all views. Depending on the view, there may or may not be a visual difference between padding and margin.

填充在视图中,边缘在外面。所有视图都可以使用填充。根据视图的不同,填充和边缘之间可能存在视觉差异。

For buttons, for example, the characteristic button background image includes the padding, but not the margin. In other words, adding more padding makes the button look visually bigger, while adding more margin just makes the gap between the button and the next control wider.

对于按钮,例如,特征按钮背景图像包括填充,但不是边缘。换句话说,添加更多的填充会使按钮看起来更大,而增加更多的边距只会使按钮和下一个控件之间的差距更大。

For TextViews, on the other hand, the visual effect of padding and margin is identical.

另一方面,对于textview,填充和边距的视觉效果是相同的。

Whether or not margin is available is determined by the container of the view, not by the view itself. In LinearLayout margin is supported, in AbsoluteLayout (considered obsolete now) - no.

边界是否可用是由视图的容器决定的,而不是视图本身。在线性布局的边界上支持,在绝对布局中(现在被认为过时了)-不。

#5


21  

Below image will let you understand the padding and margin-

下面的图片将让您了解填充和边缘。

视图的填充和空白之间的区别。

#6


7  

Padding is the space inside the border between the border and the actual image or cell contents. Margins are the spaces outside the border, between the border and the other elements next to this object.

填充是边框与实际图像或单元格内容之间的空间。边缘是边界之外的空间,边界和这个对象旁边的其他元素之间的空间。

#7


7  

Sometimes you can achieve the same result by playing only with padding OR margin. Example :

有时你可以通过只使用填充或空白来达到同样的效果。例子:

Say View X contains view Y (aka : View Y is inside View X).

说视图X包含视图Y(又名:视图Y在视图X内)。

-View Y with Margin=30 OR View X with Padding=30 will achieve the same result: View Y will have an offset of 30.

-视图Y与边距=30,或用填充=30的视图X将得到相同的结果:视图Y的偏移量为30。

#8


6  

Padding
Padding is inside of a View.For example if you give android:paddingLeft=20dp, then the items inside the view will arrange with 20dp width from left.You can also use paddingRight, paddingBottom, paddingTop which are to give padding from right, bottom and top respectively.

填充填充是在视图内部。例如,如果您使用android:划拨左侧=20dp,则视图内的项将从左侧设置20dp宽度。你也可以使用划水权,划水底部,划水顶部分别从右,底部和顶部。

Margin
Margin is outside of a View. For example if you give android:marginLeft=20dp , then the view will be arranged after 20dp from left.

边际利润是在一个观点之外。例如,如果你给android: left =20dp,那么从左到20dp后将会安排视图。

#9


5  

Padding means space between widget and widget original frame. But the margin is space between widget's original frame to boundaries other widget's frame.视图的填充和空白之间的区别。.

填充意味着小部件和小部件原始框架之间的空间。但是,在小部件的原始框架之间的边界是其他小部件的框架之间的空间。

#10


3  

Lets just suppose you have a button in a view and the size of view is 200 by 200, and the size of button is 50 by 50, and the button title is HT, now the difference between margin and padding is, you can set the margin of button in view, for example 20 from left 20 from top, and padding will adjust the text position in button or textview etc. for example, padding value is 20 from left. so it will adjust the position of text.

让我们假设你有一个按钮在一个视图和视图的大小是200到200年,和按钮的大小由50 50,HT和按钮标题,现在保证金和填充的区别是,您可以设置按钮的利润率来看,例如20从左20从顶部,和填充在按钮或将调整文本地位textview等等例如,填充值是20从左。所以它会调整文本的位置。

#11


2  

Margin refers to the extra space outside of an element. Padding refers to the extra space within an element. The margin is the extra space around the control. The padding is extra space inside the control.

边距是指元素外的额外空间。填充是指元素内的额外空间。边缘是控制周围的额外空间。填充是控件内的额外空间。

It's hard to see the difference with margin and padding with a white fill, but with a colored fill you can see it fine.

用白色填充的边距和边距很难看出差别,但是用彩色填充可以看到它很好。

#12


1  

In simple words:
padding changes the size of the box (with something).
margin changes the space between different boxes

简单地说:填充改变了盒子的大小(用一些东西)。边界改变了不同盒子之间的空间。

#13


0  

In addition to all the correct answers above, one other difference is that padding increases the clickable area of a view, whereas margins do not. This is useful if you have a smallish clickable image but want to make the click handler forgiving.

除了以上所有的正确答案之外,另一个区别是填充增加了视图的可点击区域,而页边距却没有增加。如果您有一个小的可点击的图像,但是想要使点击处理程序可以原谅,这是很有用的。

For eg, see this image of my layout with an ImageView (the Android icon) where I set the paddingBotton to be 100dp (the image is the stock launcher mipmap ic_launcher). With the attached click handler I was able to click way outside and below the image and still register a click.

例如,我用一个ImageView (Android图标)来查看我的布局图,在这里,我将面板设置为100dp(图像是stock launcher mipmap ic_launcher)。有了附加的点击处理程序,我可以点击图片的外部和下方,仍然注册一个点击。

视图的填充和空白之间的区别。

#14


0  

In simple words:

用简单的话说:

  1. Padding - creates space inside the view's border.
  2. 填充——在视图的边框内创建空间。
  3. Margin - creates space outside the view's border.
  4. 边界-在视图边界之外创建空间。

#1


485  

To help me remember the meaning of padding, I think of a big coat with lots of thick cotton padding. I'm inside my coat, but me and my padded coat are together. We're a unit.

为了帮助我记住填充物的含义,我想到了一件厚重的棉质大衣。我在外套里面,但是我和我的棉袄在一起。我们是一个单位。

But to remember margin, I think of, "Hey, give me some margin!" It's the empty space between me and you. Don't come inside my comfort zone -- my margin.

但要记住利润,我想,“嘿,给我一点利润!”这是我和你之间的空白。不要进入我的舒适区——我的优势。

To make it more clear, here is a picture of padding and margin in a TextView:

为了让它更清晰,这里有一个TextView中填充和边距的图片:

视图的填充和空白之间的区别。

xml layout for the image above

<?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>

Related

#2


556  

Padding is the space inside the border, between the border and the actual view's content. Note that padding goes completely around the content: there is padding on the top, bottom, right and left sides (which can be independent).

填充是边界内的空间,介于边界和实际视图的内容之间。注意,填充完全围绕内容:顶部、底部、左右两边都有填充(可以独立)。

Margins are the spaces outside the border, between the border and the other elements next to this view. In the image, the margin is the grey area outside the entire object. Note that, like the padding, the margin goes completely around the content: there are margins on the top, bottom, right, and left sides.

边缘是边界之外的空间,边界和这个视图旁边的其他元素之间的空间。在图像中,边缘是整个对象外部的灰色区域。注意,就像填充物一样,边缘完全围绕着内容:顶部、底部、右侧和左侧都有空白。

An image says more than 1000 words (extracted from Margin Vs Padding - CSS Properties):

一个图像显示超过1000个单词(从边缘和填充- CSS属性中提取):

视图的填充和空白之间的区别。

#3


66  

Padding is inside of a View.

填充是在视图内部。

Margin is outside of a View.

边际是在一个观点之外。

This difference may be relevant to background or size properties.

这种差异可能与背景或大小属性有关。

#4


40  

Padding is within the view, margin is outside. Padding is available for all views. Depending on the view, there may or may not be a visual difference between padding and margin.

填充在视图中,边缘在外面。所有视图都可以使用填充。根据视图的不同,填充和边缘之间可能存在视觉差异。

For buttons, for example, the characteristic button background image includes the padding, but not the margin. In other words, adding more padding makes the button look visually bigger, while adding more margin just makes the gap between the button and the next control wider.

对于按钮,例如,特征按钮背景图像包括填充,但不是边缘。换句话说,添加更多的填充会使按钮看起来更大,而增加更多的边距只会使按钮和下一个控件之间的差距更大。

For TextViews, on the other hand, the visual effect of padding and margin is identical.

另一方面,对于textview,填充和边距的视觉效果是相同的。

Whether or not margin is available is determined by the container of the view, not by the view itself. In LinearLayout margin is supported, in AbsoluteLayout (considered obsolete now) - no.

边界是否可用是由视图的容器决定的,而不是视图本身。在线性布局的边界上支持,在绝对布局中(现在被认为过时了)-不。

#5


21  

Below image will let you understand the padding and margin-

下面的图片将让您了解填充和边缘。

视图的填充和空白之间的区别。

#6


7  

Padding is the space inside the border between the border and the actual image or cell contents. Margins are the spaces outside the border, between the border and the other elements next to this object.

填充是边框与实际图像或单元格内容之间的空间。边缘是边界之外的空间,边界和这个对象旁边的其他元素之间的空间。

#7


7  

Sometimes you can achieve the same result by playing only with padding OR margin. Example :

有时你可以通过只使用填充或空白来达到同样的效果。例子:

Say View X contains view Y (aka : View Y is inside View X).

说视图X包含视图Y(又名:视图Y在视图X内)。

-View Y with Margin=30 OR View X with Padding=30 will achieve the same result: View Y will have an offset of 30.

-视图Y与边距=30,或用填充=30的视图X将得到相同的结果:视图Y的偏移量为30。

#8


6  

Padding
Padding is inside of a View.For example if you give android:paddingLeft=20dp, then the items inside the view will arrange with 20dp width from left.You can also use paddingRight, paddingBottom, paddingTop which are to give padding from right, bottom and top respectively.

填充填充是在视图内部。例如,如果您使用android:划拨左侧=20dp,则视图内的项将从左侧设置20dp宽度。你也可以使用划水权,划水底部,划水顶部分别从右,底部和顶部。

Margin
Margin is outside of a View. For example if you give android:marginLeft=20dp , then the view will be arranged after 20dp from left.

边际利润是在一个观点之外。例如,如果你给android: left =20dp,那么从左到20dp后将会安排视图。

#9


5  

Padding means space between widget and widget original frame. But the margin is space between widget's original frame to boundaries other widget's frame.视图的填充和空白之间的区别。.

填充意味着小部件和小部件原始框架之间的空间。但是,在小部件的原始框架之间的边界是其他小部件的框架之间的空间。

#10


3  

Lets just suppose you have a button in a view and the size of view is 200 by 200, and the size of button is 50 by 50, and the button title is HT, now the difference between margin and padding is, you can set the margin of button in view, for example 20 from left 20 from top, and padding will adjust the text position in button or textview etc. for example, padding value is 20 from left. so it will adjust the position of text.

让我们假设你有一个按钮在一个视图和视图的大小是200到200年,和按钮的大小由50 50,HT和按钮标题,现在保证金和填充的区别是,您可以设置按钮的利润率来看,例如20从左20从顶部,和填充在按钮或将调整文本地位textview等等例如,填充值是20从左。所以它会调整文本的位置。

#11


2  

Margin refers to the extra space outside of an element. Padding refers to the extra space within an element. The margin is the extra space around the control. The padding is extra space inside the control.

边距是指元素外的额外空间。填充是指元素内的额外空间。边缘是控制周围的额外空间。填充是控件内的额外空间。

It's hard to see the difference with margin and padding with a white fill, but with a colored fill you can see it fine.

用白色填充的边距和边距很难看出差别,但是用彩色填充可以看到它很好。

#12


1  

In simple words:
padding changes the size of the box (with something).
margin changes the space between different boxes

简单地说:填充改变了盒子的大小(用一些东西)。边界改变了不同盒子之间的空间。

#13


0  

In addition to all the correct answers above, one other difference is that padding increases the clickable area of a view, whereas margins do not. This is useful if you have a smallish clickable image but want to make the click handler forgiving.

除了以上所有的正确答案之外,另一个区别是填充增加了视图的可点击区域,而页边距却没有增加。如果您有一个小的可点击的图像,但是想要使点击处理程序可以原谅,这是很有用的。

For eg, see this image of my layout with an ImageView (the Android icon) where I set the paddingBotton to be 100dp (the image is the stock launcher mipmap ic_launcher). With the attached click handler I was able to click way outside and below the image and still register a click.

例如,我用一个ImageView (Android图标)来查看我的布局图,在这里,我将面板设置为100dp(图像是stock launcher mipmap ic_launcher)。有了附加的点击处理程序,我可以点击图片的外部和下方,仍然注册一个点击。

视图的填充和空白之间的区别。

#14


0  

In simple words:

用简单的话说:

  1. Padding - creates space inside the view's border.
  2. 填充——在视图的边框内创建空间。
  3. Margin - creates space outside the view's border.
  4. 边界-在视图边界之外创建空间。