css中padding和margin到底是相对于父元素还是子元素？ CSS中margin和padding的区别
CSS\u4e2dmargin\u548cpadding\u7684\u533a\u522bmargin\u6307\u7684\u662f\u5916\u8fb9\u8ddd\uff0cpadding\u6307\u7684\u662f\u5185\u8fb9\u8ddd\u3002
\u5916\u8fb9\u8ddd\u5c31\u662f\u6307\u76d2\u5b50\u4e0e\u9875\u9762\u4e4b\u95f4\u7684\u8ddd\u79bb
\u5185\u8fb9\u8ddd\u5c31\u662f\u5185\u5bb9\u4e0e\u76d2\u5b50\u4e4b\u95f4\u7684\u8ddd\u79bb
\u4e0a\u56fe\u5c31\u628a\u5185\u5916\u8fb9\u8ddd\u7684\u5374\u522b\u8868\u793a\u51fa\u6765\u4e86
\u5728CSS\u4e2dmargin\u662f\u6307\u4ece\u81ea\u8eab\u8fb9\u6846\u5230\u53e6\u4e00\u4e2a\u5bb9\u5668\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5bb9\u5668\u5916\u8ddd\u79bb\u3002\u5728CSS\u4e2dpadding\u662f\u6307\u81ea\u8eab\u8fb9\u6846\u5230\u81ea\u8eab\u5185\u90e8\u53e6\u4e00\u4e2a\u5bb9\u5668\u8fb9\u6846\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u5c31\u662f\u5bb9\u5668\u5185\u8ddd\u79bb\u3002 \u4e0b\u9762\u8bb2\u89e3 padding\u548cmargin\u5e38\u7528\u7684\u7528\u6cd5 \u4e00\u3001padding 1\u3001\u8bed\u6cd5\u7ed3\u6784 \uff081\uff09padding-left:10px; \u5de6\u5185\u8fb9\u8ddd \uff082\uff09padding-right:10px; \u53f3\u5185\u8fb9\u8ddd \uff083\uff09padding-top:10px; \u4e0a\u5185\u8fb9\u8ddd \uff084\uff09padding-bottom:10px; \u4e0b\u5185\u8fb9\u8ddd \uff085\uff09padding\uff1a10px; \u56db\u8fb9\u7edf\u4e00\u5185\u8fb9\u8ddd \uff086\uff09padding:10px 20px; \u4e0a\u4e0b\u3001\u5de6\u53f3\u5185\u8fb9\u8ddd \uff087\uff09padding:10px 20px 30px; \u4e0a\u3001\u5de6\u53f3\u3001\u4e0b\u5185\u8fb9\u8ddd \uff088\uff09padding:10px 20px 30px 40px; \u4e0a\u3001\u53f3\u3001\u4e0b\u3001\u5de6\u5185\u8fb9\u8ddd 2\u3001\u53ef\u80fd\u53d6\u7684\u503c \uff081\uff09length \u89c4\u5b9a\u5177\u4f53\u5355\u4f4d\u8bb0\u7684\u5185\u8fb9\u8ddd\u957f\u5ea6 \uff082\uff09% \u57fa\u4e8e\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u7684\u5185\u8fb9\u8ddd\u7684\u957f\u5ea6 \uff083\uff09auto \u6d4f\u89c8\u5668\u8ba1\u7b97\u5185\u8fb9\u8ddd \uff084\uff09inherit \u89c4\u5b9a\u5e94\u8be5\u4ece\u7236\u5143\u7d20\u7ee7\u627f\u5185\u8fb9\u8ddd 3\u3001\u6d4f\u89c8\u5668\u517c\u5bb9\u95ee\u9898 \uff081\uff09\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301padding\u5c5e\u6027 \uff082\uff09\u4efb\u4f55\u7248\u672cIE\u90fd\u4e0d\u652f\u6301\u5c5e\u6027\u503c\u201cinherit\u201d \u4e8c\u3001margin 1\u3001\u8bed\u6cd5\u7ed3\u6784 \uff081\uff09margin-left:10px; \u5de6\u5916\u8fb9\u8ddd \uff082\uff09margin-right:10px; \u53f3\u5916\u8fb9\u8ddd \uff083\uff09margin-top:10px; \u4e0a\u5916\u8fb9\u8ddd \uff084\uff09margin-bottom:10px; \u4e0b\u5916\u8fb9\u8ddd \uff085\uff09margin:10px; \u56db\u8fb9\u7edf\u4e00\u5916\u8fb9\u8ddd \uff086\uff09margin:10px 20px; \u4e0a\u4e0b\u3001\u5de6\u53f3\u5916\u8fb9\u8ddd \uff087\uff09margin:10px 20px 30px; \u4e0a\u3001\u5de6\u53f3\u3001\u4e0b\u5916\u8fb9\u8ddd \uff088\uff09margin:10px 20px 30px 40px; \u4e0a\u3001\u53f3\u3001\u4e0b\u3001\u5de6\u5916\u8fb9\u8ddd 2\u3001\u53ef\u80fd\u53d6\u7684\u503c \uff081\uff09length \u89c4\u5b9a\u5177\u4f53\u5355\u4f4d\u8bb0\u7684\u5916\u8fb9\u8ddd\u957f\u5ea6 \uff082\uff09% \u57fa\u4e8e\u7236\u5143\u7d20\u7684\u5bbd\u5ea6\u7684\u5916\u8fb9\u8ddd\u7684\u957f\u5ea6 \uff083\uff09auto \u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd \uff084\uff09inherit \u89c4\u5b9a\u5e94\u8be5\u4ece\u7236\u5143\u7d20\u7ee7\u627f\u5916\u8fb9\u8ddd 3\u3001\u6d4f\u89c8\u5668\u517c\u5bb9\u95ee\u9898 \uff081\uff09\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301margin\u5c5e\u6027 \uff082\uff09\u4efb\u4f55\u7248\u672cIE\u90fd\u4e0d\u652f\u6301\u5c5e\u6027\u503c\u201cinherit\u201d
你贴的那个图，那个margin～right是指相邻li 边框之间的距离，我最近用到的发现有的是与相邻元素之间边框之间的距离，有的是与父元素边框的距离，越来越迷惑了这种情况只能出现在多名同时定义
如div ,ul{}
自己写一个例子看看不就知道了吗？
要多动手，多些。
margin是相对于外部。
padding是内容到边框的距离。。。
你要以一个元素对象来理解这两个属性，比如div这个层，padding 是指div的边到内部元素的距离，margin是div边距到外部元素的距离
绛旓細margin鍜padding閮芥槸CSS涓鐨勫睘鎬э紝瀹冧滑鐢ㄤ簬鎺у埗鍏冪礌涔嬮棿鐨勭┖闂达紝浣嗙敤閫斿拰鏁堟灉涓嶅悓銆俶argin 1. 瀹氫箟涓庣敤閫旓細margin鎸囩殑鏄厓绱犺竟妗嗗閮ㄧ殑绌洪棿锛屽嵆鍏冪礌涓庡懆鍥村厓绱犵殑璺濈銆2. 鏁堟灉鑼冨洿锛歮argin鏄厓绱犱箣闂寸殑闂撮殧锛屽彲浠ヨ缃笂涓嬪乏鍙崇殑澶栬竟璺濓紝浣垮緱鍏冪礌涔嬮棿鐣欐湁绌虹櫧鍖哄煙銆3. 鐢ㄩ斾妇渚嬶細甯哥敤浜庢帶鍒跺潡绾у厓绱犱箣闂寸殑...
绛旓細Padding:杩欎釜绠鍐欏睘鎬ц缃厓绱犳墍鏈夊唴杈硅窛鐨勫搴︼紝鎴栬呰缃悇杈逛笂鍐呰竟璺濈殑瀹藉害銆傝鍐呴潪鏇挎崲鍏冪礌涓婅缃鐨勫唴杈硅窛涓嶄細褰卞搷琛岄珮璁＄畻锛涘洜姝わ紝濡傛灉涓涓厓绱犳棦鏈夊唴杈硅窛鍙堟湁鑳屾櫙锛屼粠瑙嗚涓婄湅鍙兘浼氬欢浼稿埌鍏朵粬琛岋紝鏈夊彲鑳借繕浼氫笌鍏朵粬鍐呭閲嶅彔銆傚厓绱犵殑鑳屾櫙浼氬欢浼哥┛杩囧唴杈硅窛銆備笉鍏佽鎸囧畾璐熻竟璺濆笺傚 鎻忚堪 padding-top pad...
绛旓細鍦–SS涓璵argin鏄寚浠庤嚜韬竟妗嗗埌鍙︿竴涓鍣ㄨ竟妗嗕箣闂寸殑璺濈锛屽氨鏄鍣ㄥ璺濈銆鍦–SS涓璸adding鏄寚鑷韩杈规鍒拌嚜韬唴閮ㄥ彟涓涓鍣ㄨ竟妗嗕箣闂寸殑璺濈锛屽氨鏄鍣ㄥ唴璺濈銆1銆佽娉曠粨鏋勩俻adding锛歱adding-left:10px; 宸﹀唴杈硅窛銆乸adding-right:10px; 鍙冲唴杈硅窛銆乸adding-top:10px; 涓婂唴杈硅窛銆乸adding-bottom:10px; ...
绛旓細padding:鍐呰竟璺 鏄唴瀹逛笌杈规鐨璺濈 margin锛氬杈硅窛 鏄竟妗嗕笌杈圭晫涔嬮棿鐨勮窛绂 float锛氭诞鍔 2涓睘鎬э細宸︽诞鍔 left 鍙虫诞鍔 right 娴姩浜嗕互鍚庡彲浠ユ妸鍧楀厓绱犳敼鍙樹负琛屽唴鍏冪礌
绛旓細margin鍜padding閮借〃绀鸿竟璺濈殑锛宮argin鏄寚鐨勫杈硅窛灞炴,padding鏄寚鐨鍐呰竟璺銆傝繖鏄洅瀛愭ā鍨嬬殑姒傚康銆傜洅瀛愭ā鍨嬬ず鎰忥細浠ｇ爜绀轰緥锛氱粨鏋滃涓嬶細
绛旓細涓銆佷粙缁 css涓浣嶇疆灞炴ц缃湁margin涓巔adding涓ょ锛屽叾鍖哄埆绠鍗曟潵璇存槸margin璁剧疆澶栬竟璺濓紝padding璁剧疆鍐呰竟璺濄備笅鍥句负css妯″瀷鐩掞細璇存槑锛氳缃甿argin锛岃〃绀鸿缃綋鍓嶅厓绱犵鍏跺涓灞傜殑璺濈;璁剧疆padding,琛ㄧず璁剧疆绂诲叾鍐呬竴灞傚厓绱犵殑璺濈 浜屻佺ず渚嬩唬鐮侊細<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/...
绛旓細margin鎸鐨鏄杈硅窛锛padding鎸囩殑鏄唴杈硅窛銆傚杈硅窛灏辨槸鎸囩洅瀛愪笌椤甸潰涔嬮棿鐨勮窛绂 鍐呰竟璺濆氨鏄唴瀹逛笌鐩掑瓙涔嬮棿鐨勮窛绂 涓婂浘灏辨妸鍐呭杈硅窛鐨勫嵈鍒〃绀哄嚭鏉ヤ簡
绛旓細鍖哄埆濡備笅锛1銆佸湪鐩掑瓙妯″瀷涓璵argin鏄寚鐩掑瓙涔嬮棿鐨璺濈锛岃padding鏄肩洅瀛愬唴瀹瑰拰杈规涔嬮棿鐨勮窛绂汇2銆佺洅瀛愭ā鍨嬬殑鍥剧墖濡備笅锛
绛旓細鐪嬩竴涓嬧CSS鐩掑瓙妯″瀷鈥濈ず鎰忓浘锛屽氨鏄庣櫧浜嗐備袱涓槸涓嶄竴鏍风殑锛屼妇涓緥瀛愶紝涓涓厓绱狅紝鏈夎儗鏅鑹诧紱閭ｄ箞padding鍖哄煙鏄剧ず鑳屾櫙棰滆壊锛岃宮argin鍖哄煙鏄笉浼氭樉绀鐨銆備竴涓厓绱犵敱鍑犻儴鍒嗙粍鎴愶細1銆乵argin 2銆乥order 3銆乸adding 4銆佸唴瀹规湰韬 鍙傝冭祫鏂欙細http://baike.baidu.com/view/2758739.htm ...
绛旓細margin:澶栬竟璺濄傛寚鍧楃骇鍏冪礌涓庡潡鍧楃骇鍏冪礌涔嬮棿鐨璺濈銆padding:鍐呰竟璺濄傛寚琛屽唴鍏冪礌涓庡潡绾у厓绱犱箣闂寸殑璺濈锛屼篃鍙互鏄唴瀹逛笌鍏冪礌涔嬮棿鐨勮窛绂汇傚叾涓疄绾块儴鍒嗘槸妗嗙殑瀹為檯澶у皬锛屾渶澶栧眰鐨勮櫄绾挎槸妗嗗疄闄呭崰浜嗗澶у湴鏂
