码迷,mamicode.com
首页 > 其他好文 > 详细

margin和padding的区别

时间:2015-05-06 17:02:04      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

http://blog.163.com/email_wangyong/blog/static/126152455200972431013536/ 

目前web2.0已经越来被人们认可,因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准,其中很重要的一条就是新的布局规则,div+css。以前基本上是用table布局的,这种传统的方式简单直观,但是这新的标准我学习起来时常找不到北。呵呵,就拿今天这个例子来说吧,很多朋友肯定也有我这种情况的,那我就从网上搜集一些例子出来,让个更多的人消除这种烦恼。

      事例一:

     css中padding和margin的区别

 

 

margin 外边距

border 边框

padding 内边距

也就是说 设置margin 那么他所占据的空白地方会是在边框外面

设置padding 他所占据的空白地方是在边框里面,图解一下就更清楚了。

 

技术分享

 

如上图,A,B两个方框,A代码padding,B代表margin,现在我们看A箭头与蓝色边框的距离,这就是padding叫做内边距,下面再来看看B外面的箭头与B之前的距离就是我们所说的margin的,叫做外间距,哈哈你现在应该明白了,什么是padding,什么是margin吧?呵呵

事例二:

看看css盒模型,下图!margin是 DIV与周边元素的距离padding是 DIV里边内容与这个DIV的距离

技术分享

 

http://blog.csdn.net/xsl1990/article/details/17680461

一、对于几个概念的比较模糊的这里记录一些: 
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>  



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

技术分享 

margin和padding的区别

标签:

原文地址:http://www.cnblogs.com/kungfupanda/p/4481979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!