css代码中 margin:auto 和 margin:0 auto 有什么区别？ CSS中：margin:auto与margin: 0 aut...
css\u4ee3\u7801\u4e2d margin:auto \u548c margin:0 auto \u6709\u4ec0\u4e48\u533a\u522b\uff1f\u4e00\u3001\u533a\u522b
1\u3001\u53c2\u6570\u8be6\u89e3
margin:auto = margin:auto auto auto auto;margin:0 auto = margin:0 auto 0 auto;
margin:n m p q\u8868\u793a\u8be5\u5143\u7d20\u4e0a\u5916\u8fb9\u8ddd\u4e3an\uff0c\u53f3\u5916\u8fb9\u8ddd\u4e3am\uff0c\u4e0b\u5916\u8fb9\u8ddd\u4e3ap\uff0c\u5de6\u5916\u8fb9\u8ddd\u4e3aq\uff0c\u5373 margin:\u4e0a \u53f3 \u4e0b \u5de6 \uff0c\u9006\u65f6\u9488\u4e00\u5708\u3002
2\u3001\u5b9e\u4f8b\u8bf4\u660e
margin\u540e\u9762\u662f\u67094\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin:1px 2px 3px 4px\uff0c\u5206\u522b\u8868\u793a \u4e0a\uff081px\uff09\u3001\u53f3(2px)\u3001\u4e0b(3px)\u3001\u5de6(4px)\u3002
margin\u540e\u9762\u5982\u679c\u53ea\u51992\u4e2a\u53c2\u6570\u7684\u3002
\u4f8b\u5982\uff1amargin\uff1a1px 2px
\u90a3\u4e48\u8fd9\u662f\u4ee3\u8868 \u4e0a\u4e0b\u90fd\u4e3a1px \u5de6\u53f3\u90fd\u4e3a2px\u3002
\u6269\u5c55\u8d44\u65991\u3001margin 0px auto\u5c5e\u6027\u89c4\u5219
margin:0px auto\u4ee3\u8868\u5bf9\u8c61\u4e0a\u4e0b\u95f4\u9694\u4e3a0px\uff0c\u5de6\u53f3\u95f4\u9694\u6839\u636e\u5bf9\u8c61\u5bbd\u5ea6\u81ea\u9002\u5e94\u3002
margin:0px auto\u7b80\u5199\uff1a\u53ef\u4ee5\u53bb\u63890\u540e\u9762\u7684px\u5355\u4f4d\uff0c\u4e00\u822cCSS\u4ee3\u7801\u4e2d\u5982\u679c\u503c\u4e3a0\uff0c\u90a3\u53ef\u4ee5\u4e0d\u7528\u8ddfhtml\u957f\u5ea6\u5355\u4f4d\u3002
margin;0px auto\u6216margin:0 auto\u4f5c\u7528\uff1a\u5e38\u7528\u4e8e\u8ba9DIV\u5e03\u5c40\u5c45\u4e2d,\u8d77\u5230\u8ba9\u5e03\u5c40\u5c45\u4e2d\u4f5c\u7528\u3002
2\u3001margin:auto\u5c5e\u6027\u8bf4\u660e
margin:auto\u65f6\u6d4f\u89c8\u5668\u8ba1\u7b97\u5916\u8fb9\u8ddd,\u5f53margin\u5b9a\u4e49\u4e3aauto\u65f6,\u5c06\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160px \u3002
margin:auto\u65f6\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u5206\u914d\u5de6\u53f3\u8fb9\u8ddd\uff0c\u4f7f\u5143\u7d20\u5e73\u5747\u5206\u914d\u5360\u7528\u7236\u7ea7\u5bb9\u5668\u7684\u5de6\u53f3\u8fb9\u8ddd\uff0c\u8fbe\u5230\u5143\u7d20\u5c45\u4e2d\u7684\u76ee\u7684
3\u3001CSS\u4e2dauto\u5143\u7d20
\u5b9a\u4e49auto\u5143\u7d20\uff0c\u56e0\u5143\u7d20\u7c7b\u578b\u548c\u4e0a\u4e0b\u6587\u800c\u5f02\u3002\u5728\u8fb9\u8ddd\u4e2d\uff0cauto\u53ef\u4ee5\u8868\u793a\u4e24\u79cd\u60c5\u51b5\uff1a\u5360\u7528\u53ef\u7528\u7a7a\u95f4\u62160 px\u3002\u8fd9\u4e24\u4e2a\u5c06\u4e3a\u5143\u7d20\u5b9a\u4e49\u4e0d\u540c\u7684\u5e03\u5c40\u3002
4\u3001margin\u7684\u5144\u5f1f\u5c5e\u6027padding
margin\u5c5e\u6027\u662f\u5916\u8fb9\u8ddd\uff0c\u800cpadding\u5c5e\u6027\u662f\u5185\u8fb9\u8ddd\u3002padding\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
1\u3001\u610f\u601d\u4e0d\u540c\u3002margin:auto=margin:auto auto auto auto\uff0c\u8868\u793a\u4e0a\u4e0b\u5de6\u53f3\u90fd\u4e3aauto\uff1bmargin:0 auto=margin:0 auto 0 auto\uff0c\u8868\u793a\u4e0a\u4e0b\u4e3a0\uff0c\u5de6\u53f3\u4e3aauto\uff1b
2\u3001\u5c45\u4e2d\u65b9\u5f0f\u4e0d\u540c\u3002margin:auto\u8868\u793a\u6a2a\u7ad6\u90fd\u5c45\u4e2d\uff0cmargin: 0 auto\u8868\u793a\u6a2a\u5c45\u4e2d\uff0c\u7ad6\u4e0d\u5c45\u4e2d\uff1b
margin\u540e\u9762\u4e00\u822c\u4f1a\u8ddf4\u4e2a\u53c2\u6570\uff0c\u5982margin:1px\u30011px\u30011px\u30011px\uff0c\u5206\u522b\u8868\u793a\u4e0a\u5916\u8fb9\u8ddd\u4e3a1px\u3001\u53f3\u5916\u8fb9\u8ddd\u4e3a1px\u3001\u4e0b\u5916\u8fb9\u8ddd\u4e3a1px\u3001\u5de6\u5916\u8fb9\u8ddd\u4e3a1px\u3002
\u5982\u679c\u540e\u9762\u53ea\u51992\u4e2a\u53c2\u6570\u7684\u8bdd\uff0c\u5982margin\uff1a1px\u30012px\uff0c\u5219\u8868\u793a\u4e0a\u4e0b\u5916\u8fb9\u8ddd\u4e3a\u90fd\u4e3a1px\uff0c\u5de6\u53f3\u5916\u8fb9\u8ddd\u90fd\u4e3a2px\u3002
\u6269\u5c55\u8d44\u6599Cascading Style Sheets\uff0c\u4e2d\u6587\u542b\u4e49\u662f\u5c42\u53e0\u6837\u5f0f\u8868\uff0c\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\u6216XML\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\uff0c\u4e0d\u4ec5\u53ef\u4ee5\u9759\u6001\u5730\u4fee\u9970\u7f51\u9875\uff0c\u8fd8\u53ef\u4ee5\u914d\u5408\u5404\u79cd\u811a\u672c\u8bed\u8a00\u52a8\u6001\u5730\u5bf9\u7f51\u9875\u5404\u5143\u7d20\u8fdb\u884c\u683c\u5f0f\u5316\u3002
margin\u662fCSS\u7684\u4e00\u4e2a\u5c5e\u6027\uff0c\u4e3b\u8981\u529f\u80fd\u662f\u7b80\u5199\u5c5e\u6027\u5728\u4e00\u4e2a\u58f0\u660e\u4e2d\u8bbe\u7f6e\u6240\u6709\u5f53\u524d\u6216\u8005\u6307\u5b9a\u5143\u7d20\u5916\u8fb9\u8ddd\u5c5e\u6027\u3002\u8be5\u5c5e\u6027\u53ef\u4ee5\u6709 1 \u5230 4 \u4e2a\u503c\u3002margin\u5c5e\u6027\u63a5\u53d7\u4efb\u4f55\u957f\u5ea6\u5355\u4f4d\u3001\u767e\u5206\u6570\u503c\u751a\u81f3\u8d1f\u503c\u3002
margin \u5c5e\u6027\u53ef\u4ee5\u5355\u72ec\u6539\u53d8\u5143\u7d20\u7684\u4e0a\uff0c\u4e0b\uff0c\u5de6\uff0c\u53f3\u8fb9\u8ddd\u3002\u4e5f\u53ef\u4ee5\u4e00\u6b21\u6539\u53d8\u6240\u6709\u7684\u5c5e\u6027\u3002\u6240\u6709\u6d4f\u89c8\u5668\u90fd\u652f\u6301 margin \u5c5e\u6027\u3002
\u53c2\u8003\u8d44\u6599CSS\uff08\u5c42\u53e0\u6837\u5f0f\u8868\uff09_\u767e\u5ea6\u767e\u79d1
一、区别
1、参数详解
margin:auto = margin:auto auto auto auto;
margin:0 auto = margin:0 auto 0 auto;
margin:n m p q表示该元素上外边距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。
2、实例说明
margin后面是有4个参数的。
例如：margin:1px 2px 3px 4px，分别表示 上（1px）、右(2px)、下(3px)、左(4px)。
margin后面如果只写2个参数的。
例如：margin：1px 2px
那么这是代表 上下都为1px 左右都为2px。
扩展资料
1、margin 0px auto属性规则
margin:0px auto代表对象上下间隔为0px，左右间隔根据对象宽度自适应。
margin:0px auto简写：可以去掉0后面的px单位，一般CSS代码中如果值为0，那可以不用跟html长度单位。
margin;0px auto或margin:0 auto作用：常用于让DIV布局居中,起到让布局居中作用。
2、margin:auto属性说明
margin:auto时浏览器计算外边距,当margin定义为auto时,将占用可用空间或0px 。
margin:auto时浏览器会自动分配左右边距，使元素平均分配占用父级容器的左右边距，达到元素居中的目的
3、CSS中auto元素
定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。
4、margin的兄弟属性padding
margin属性是外边距，而padding属性是内边距。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
扩展阅读：可直接进入网站的代码 ... js代码大全网站源码 ... oppo#代码功能大全 ... html+css代码大全 ... 免费css网站 ... css中margin-bottom ... 免费代码生成器 ... css margin auto ... 个人网站css代码 ...
