CSS的margin属性怎么设置
CSS的margin属性怎么设置？margin是外边距。这次来教大家如何用margin属性来操作DIV。怎么样操作DIV与DIV之间的间距
margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
DIV CSS外边距指CSS属性单词margin，margin是设置对象四边的外延边距，没有背景颜色也无颜色。
1、margin语法
Margin:10px
Margin的值是数字+html单位，同时也可以为auto（自动、自适应）
2、应用结构
Div{margin:10px}
设置div对象四边间距为10px
3、Margin说明
margin是设置对象外边距外延边距离。
margin的值有三种情况，可以为正整数和负整数并加单位如PX像素（margin-left:20px）；可以为auto自动属性(margin-left:auto 自动)；可以为百分比（%）值（margin-left:3%）。
Margin延伸（单独设置四边间距属性单词）
margin-left 对象左边外延边距 （margin-left:5px; 左边外延距离5px）
margin-right 对象右边外延边距 （margin-right:5px; 右边外延距离5px）
margin-top 对象上边外延边距 （margin-top:5px; 上边外延距离5px）
margin-bottom 对象下边外延边距 （margin-bottom:5px; 下边外延距离5px）
相关阅读：
设置DIV的背景色有哪几种方法
DIV+CSS怎么使用
什么是CSS
绛旓細margin:10px 0 10px 0锛屽彲浠ュ悎骞跺啓涓簃argin:10px 0銆margin灞炴鐨勯『搴忓搴 涓 鍙 涓 宸︼紝浣犲彲浠ヨ繖鏍疯锛岄『鏃堕拡浠庝笂寮濮嬪搴4涓睘鎬с傚綋涓婁笅鎴栬呭乏鍙崇浉鍚屾椂鍙互鍚堝苟绠鍐欍4涓兘鐩稿悓鏃跺彲浠ュ啓涓涓
绛旓細閫氬父鏈変互涓嬪嚑绉嶆柟娉曪細1銆丆SS娉 鍙互鍦ㄦ爣绛句腑璁剧疆margin灞炴锛屽嵆锛歴tyle="margin:5px 0 5px 0;"锛堥『搴忥細涓娿佸彸銆佷笅宸︼紝浜﹀彲绠鍐欎负style="margin: 5px 0;"锛夛紝杩欐CSS鐨浣滅敤鏄湪褰撳墠琛ㄦ牸澶栭儴鐨勪笂涓嬪悇鐣欏嚭5px鐨勭┖鐧姐2銆佺┖瀵硅薄娉 锛1锛夌┖琛屻傝繕鍙互鍦ㄨ〃鏍煎悗鏁插洖杞︽崲琛岋紝浜х敓鏍囩锛屾垨鑰呮寜Shift+...
绛旓細margin璺焢adding涓鏍凤紝涔熸湁绠娲佸啓娉曘傛垜浠彲浠ヤ娇鐢margin灞炴鏉璁剧疆鍥涗釜鏂瑰悜鐨勫杈硅窛銆傚湪瀹為檯缂栫▼涓紝鎴戜滑寰寰浣跨敤鐨勬槸margin鐨勮繖绉嶉珮鏁堢畝娲佸啓娉曟潵缂栫▼銆俶argin鍐欐硶鏈3绉嶏紝鍒嗗埆濡備笅锛 margin:鍍忕礌鍊; margin:鍍忕礌鍊1 鍍忕礌鍊2; margin:鍍忕礌鍊1 鍍忕礌鍊2 鍍忕礌鍊3 鍍忕礌鍊4;渚嬪锛氣渕argin:20px;鈥...
绛旓細灞呬腑璁剧疆鐨勬柟娉曟湁澶氱锛屼互涓嬩粙缁嶄袱绉嶅父瑙佺殑鏂规硶锛氭柟娉曚竴锛氫娇鐢CSS鐨刴argin灞炴灏嗗厓绱犱笂涓嬪乏鍙冲眳涓傚叿浣撴楠ゅ涓嬶細灏嗛渶瑕佸眳涓殑鍏冪礌鍖呰９鍦ㄤ竴涓鍣ㄥ厓绱犲唴锛屼緥濡備娇鐢╠iv銆備负瀹瑰櫒鍏冪礌璁剧疆瀹藉害鍜岄珮搴︼紝骞惰缃乏鍙宠竟璺濅负auto锛屽嵆鍙疄鐜板厓绱犵殑涓婁笅灞呬腑銆備负瀹瑰櫒鍏冪礌璁剧疆涓婁笅杈硅窛涓篴uto锛屽嵆鍙疄鐜板厓绱犵殑宸﹀彸灞呬腑銆傜ず渚...
绛旓細鐩磋鐐硅灏辨槸鐢ㄥ杈硅窛鎶奲ox鎾戞垚灞呬腑銆 margin涔熷彲浠ョ敤椤烘椂閽堢殑鏂瑰紡浠ヤ竴涓鍙ュ畾涔夊洓涓杈硅窛鐨勫ぇ灏 margin鏈変竴涓猘uto灞炴鐢ㄦ潵璁剧疆娴忚鍣ㄨ竟璺濓紝鍙兘鐢ㄥ湪瀹藉害涓婏紝涓嶈兘鐢ㄥ湪楂樺害涓娿傚彲浠ョ湅鍒扮幇鍦╞ox瀹炵幇浜嗘按骞冲眳涓 margin鍜宲adding涓鏍峰彲浠ョ畝鍐欍俶argin璐熷煎彲浠ヨ杈规涓庢祻瑙堝櫒鍚堝苟銆 margin涓0鐨...
绛旓細鎵鏈夌殑澶栬竟璺濆睘鎬у湪涓涓０鏄庝腑銆 鏈緥婕旂ず濡備綍灏嗘墍鏈夌殑澶栬竟璺灞炴ц缃浜庝竴涓０鏄庝腑銆 CSS 澶栬竟璺濆睘鎬 灞炴 鎻忚堪 margin 绠鍐欏睘鎬с傚湪涓涓０鏄涓缃鎵鏈夊杈硅窛灞炴с margin-bottom 璁剧疆鍏冪礌鐨勪笅澶栬竟璺濄 margin-left 璁剧疆鍏冪礌鐨勫乏澶栬竟璺濄 margin-right 璁剧疆鍏冪礌鐨勫彸澶栬竟璺濄 margin-top 璁剧疆鍏冪礌鐨勪笂澶栬竟璺...
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv {border: 1px solid #0b93d5; margin-top: 50px;}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鍏冪礌鐨勪笂杈硅窛鐢css璁剧疆涓轰簡50px銆
绛旓細浠ヤ笅鏄竴浜涘父鐢ㄧ殑CSS灞炴锛屽畠浠彲浠ュ奖鍝嶇洅瀛愭ā鍨嬬殑瀹藉害锛坵idth锛夊拰楂樺害锛坔eight锛夛細1. width锛堝搴︼級锛璁剧疆鍏冪礌鐨勫搴︺傚彲浠ヤ娇鐢ㄥ儚绱狅紙px锛夈佺櫨鍒嗘瘮锛%锛夋垨鍏朵粬鍗曚綅鏉ユ寚瀹氬搴﹀笺2. height锛堥珮搴︼級锛氳缃厓绱犵殑楂樺害銆傚悓鏍峰彲浠ヤ娇鐢ㄥ儚绱犮佺櫨鍒嗘瘮鎴栧叾浠栧崟浣嶆潵鎸囧畾楂樺害鍊笺3. padding锛堝唴杈硅窛锛夛細璁剧疆鍏冪礌鍐呭...
绛旓細 浣跨敤margin
绛旓細margin锛屾槸CSS璇硶锛岃繖涓畝鍐欏睘鎬х敤浜庡湪涓涓０鏄涓缃鎵鏈夊綋鍓嶆垨鑰呮寚瀹氬厓绱犳墍鏈夊杈硅窛鐨勫搴︼紝鎴栬呰缃悇杈逛笂澶栬竟璺濈殑瀹藉害銆俶argin鐨勫畾涔夛細margin绠鍐欏睘鎬у湪涓涓０鏄庝腑璁剧疆鎵鏈夊綋鍓嶆垨鑰呮寚瀹氬厓绱犲杈硅窛灞炴с傝灞炴у彲浠ユ湁 1 鍒 4 涓笺margin 灞炴鎺ュ彈浠讳綍闀垮害鍗曚綅銆佺櫨鍒嗘暟鍊肩敋鑷宠礋鍊笺俶argin 灞炴у彲浠ュ崟鐙敼鍙...
