padding与margin的区别

本文深入解析Android布局中padding、margin的区别,以及如何使用android:gravity和android:layout_gravity来实现视图内容的限定与定位。通过实例代码展示各个属性的应用效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、对于几个概念的比较模糊的这里记录一些:  
padding margin都是边距的含义,关键问题得明白是什么相对什么的边距. 
padding是控件的内容相对控件的边缘的边距. 
margin是控件边缘相对父空间的边距. 


 



android:gravity 属性是对该view 内容的限定.比如一个button 上面的text. 你可以设置该text 在view的靠左,靠右等位置.该属性就干了这个. 
android:layout_gravity是用来设置该view中的子view相对于父view的位置.比如一个button 在linearlayout里,你想把该button放在靠左,靠右等位置就可以在linearlayout中通过该属性设置. 

下面例子说明: 
Java代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:paddingLeft="10dip"  
  7.     android:paddingRight="10dip"  
  8.     android:paddingTop="10dip"  
  9.     android:paddingBottom="10dip"  
  10.     >  
  11. <TextView    
  12.     android:layout_width="wrap_content"   
  13.     android:layout_height="wrap_content"   
  14.     android:background="#FF0000"  
  15.     android:text="@string/hello"  
  16.     android:paddingLeft="50dip"  
  17.     android:paddingRight="50dip"  
  18.     android:paddingTop="50dip"  
  19.     android:paddingBottom="50dip"  
  20.     android:layout_marginBottom="10dip"  
  21.     />  
  22.     <TextView    
  23.     android:layout_width="wrap_content"   
  24.     android:layout_height="wrap_content"   
  25.     android:background="#FF0000"  
  26.     android:text="@string/hello"  
  27.     android:paddingLeft="50dip"  
  28.     android:paddingRight="50dip"  
  29.     android:paddingTop="50dip"  
  30.     android:paddingBottom="50dip"  
  31.     android:layout_marginBottom="10dip"  
  32.     />  
  33.     <TextView    
  34.     android:layout_width="wrap_content"   
  35.     android:layout_height="wrap_content"   
  36.     android:background="#FF0000"  
  37.     android:text="@string/hello"  
  38.     android:paddingLeft="50dip"  
  39.     android:paddingRight="50dip"  
  40.     android:paddingTop="50dip"  
  41.     android:paddingBottom="50dip"  
  42.     android:layout_marginBottom="10dip"  
  43.     />  
  44.     <TextView    
  45.     android:layout_width="wrap_content"   
  46.     android:layout_height="wrap_content"   
  47.     android:background="#FF0000"  
  48.     android:text="@string/hello"  
  49.     android:paddingLeft="50dip"  
  50.     android:paddingRight="50dip"  
  51.     android:paddingTop="50dip"  
  52.     android:paddingBottom="50dip"  
  53.     android:layout_marginBottom="10dip"  
  54.     />  
  55. </LinearLayout>  


那么我会得到如下的效果,图上已经很明确的标出来区别咯 

 
### CSS 中 paddingmargin区别及用法 #### 一、基本概念 在 CSS 中,`padding` 和 `margin` 是用于控制元素周围空白区域的两个重要属性。它们的主要作用是调整元素其他元素或内容之间的距离[^1]。 - **Padding** 是指元素边框内部内容之间的空白区域。它直接影响到元素内部的空间大小。 - **Margin** 是指元素边框外部其他元素之间的空白区域。它决定了元素其他元素之间的距离。 #### 二、主要区别 1. **位置差异** - `padding` 位于元素的边框内侧,用于分隔元素的内容和边框[^2]。 - `margin` 位于元素的边框外侧,用于分隔当前元素其他元素或父容器的距离[^3]。 2. **透明性颜色** - `padding` 是透明的,但它会影响元素的宽度和高度计算[^4]。 - `margin` 同样是透明的,但不会影响元素自身的尺寸,仅改变其其他元素的相对位置[^5]。 3. **塌陷现象** - `margin` 在某些情况下会发生外边距合并(collapse),即相邻元素的垂直外边距会合并为一个更大的值。 - `padding` 不会发生类似的合并现象,因此在需要精确控制间距时更稳定[^4]。 4. **负值支持** - `margin` 支持负值,允许元素重叠或向内收缩[^4]。 - `padding` 不支持负值,始终为正值或零[^5]。 #### 三、代码示例 以下是一个简单的代码示例,展示如何使用 `padding` 和 `margin`: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Padding vs Margin</title> <style> .box { width: 100px; height: 100px; background-color: lightblue; border: 1px solid black; } .with-padding { padding: 20px; /* 内部空白 */ } .with-margin { margin: 20px; /* 外部空白 */ } </style> </head> <body> <div class="box with-padding">Padding 示例</div> <div class="box with-margin">Margin 示例</div> </body> </html> ``` #### 四、实际应用 1. **Padding 的应用场景** 当需要增加元素内部内容边框之间的空间时,使用 `padding`。例如,在按钮设计中,可以通过设置 `padding` 来调整文字按钮边框之间的距离[^1]。 2. **Margin 的应用场景** 当需要调整元素其他元素或父容器之间的距离时,使用 `margin`。例如,在布局中通过设置 `margin` 来避免元素过于靠近页面边缘或其他兄弟元素[^2]。 #### 五、注意事项 - 如果需要同时设置多个方向的 `padding` 或 `margin`,可以分别指定上、右、下、左四个方向的值,或者使用简写形式[^5]。 - 在处理垂直外边距合并问题时,可以通过添加一个透明的分隔元素来避免塌陷。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值