{"id":2365,"date":"2023-11-14T15:10:41","date_gmt":"2023-11-14T03:59:31","guid":{"rendered":""},"modified":"2023-11-14T11:59:31","modified_gmt":"2023-11-14T03:59:31","slug":"CSS margin","status":"publish","type":"post","link":"https:\/\/bianchenghao6.com\/2365.html","title":{"rendered":"CSS margin"},"content":{"rendered":"


\n <\/head>
\n <\/p>\n

\n

CSS margin<\/h1>\n<\/p><\/div>\n
\n CSS margin\u5c5e\u6027\u7528\u4e8e\u5b9a\u4e49\u5143\u7d20\u5468\u56f4\u7684\u7a7a\u95f4\u3002\u5b83\u662f\u5b8c\u5168\u900f\u660e\u7684\uff0c\u6ca1\u6709\u4efb\u4f55\u80cc\u666f\u8272\u3002\n <\/div>\n
\n \u53ef\u4ee5\u4f7f\u7528\u5355\u72ec\u7684\u5c5e\u6027\u72ec\u7acb\u66f4\u6539\u9876\u90e8\uff0c\u5e95\u90e8\uff0c\u5de6\u4fa7\u548c\u53f3\u4fa7\u8fb9\u8ddd\u3002\u60a8\u8fd8\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u901f\u8bb0\u8fb9\u8ddd\u5c5e\u6027\u6765\u4e00\u6b21\u66f4\u6539\u6240\u6709\u5c5e\u6027\u3002\n <\/div>\n
\n \u6709\u4ee5\u4e0b
\n CSS\u8fb9\u8ddd\u5c5e\u6027\uff1a\n <\/div>\n

CSS\u4fdd\u8bc1\u91d1\u5c5e\u6027<\/h2>\n\n\n\n\n\n\n\n\n
\u5c5e\u6027<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
margin<\/td>\n\u5728\u4e00\u4e2a\u58f0\u660e\u4e2d\u8bbe\u7f6eleft\u3001right\u3001top\u3001bottom\u5c5e\u6027\u3002<\/td>\n<\/tr>\n
margin-left<\/td>\n\u5b83\u7528\u4e8e\u8bbe\u7f6e\u5143\u7d20\u7684\u5de6\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n
margin-right<\/td>\n\u7528\u4e8e\u8bbe\u7f6e\u5143\u7d20\u7684\u53f3\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n
margin-top <\/td>\n\u7528\u4e8e\u8bbe\u7f6e\u5143\u7d20\u7684\u4e0a\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n
margin-bottom <\/td>\n\u5b83\u7528\u4e8e\u8bbe\u7f6e\u5143\u7d20\u7684\u5e95\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

CSS Margin\u7684\u503c<\/h2>\n
\n \u4ee5\u4e0b\u662fMargin\u7684\u4e00\u4e9b\u503c\u3002\n <\/div>\n\n\n\n\n\n\n\n
\u503c<\/td>\n\u8bf4\u660e<\/td>\n<\/tr>\n
auto<\/td>\n\u5de6\u53f3\u8fb9\u8ddd\u5747\u5300\u7684\u5360\u636e\u7a7a\u95f4\u3002<\/td>\n<\/tr>\n
length<\/td>\n\u7528\u4e8e\u6307\u5b9a\u8fb9\u8dddpt\uff0cpx\uff0ccm\u7b49\uff0c\u5176\u9ed8\u8ba4\u503c\u4e3a0px\u3002<\/td>\n<\/tr>\n
\uff05<\/td>\n\u5b83\u7528\u4e8e\u5b9a\u4e49\u5305\u542b\u5143\u7d20\u5bbd\u5ea6\u7684\u767e\u5206\u6bd4\u7684\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n
inherit<\/td>\n\u7528\u4e8e\u7ee7\u627f\u7236\u5143\u7d20\u7684\u8fb9\u8ddd\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n \u6ce8\u610f\uff1a<\/span>\u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528\u8d1f\u503c\u6765\u91cd\u53e0\u5185\u5bb9\u3002\n <\/div>\n

CSS Margin\u793a\u4f8b<\/h2>\n
\n \u60a8\u53ef\u4ee5\u4e3a\u5143\u7d20\u7684\u4e0d\u540c\u4fa7\u9762\u5b9a\u4e49\u4e0d\u540c\u7684\u8fb9\u8ddd\u3002\n <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
     background-color: pink;width:300px;
 }
 p.ex {
     margin-top: 50px;
     margin-bottom: 50px;
     margin-right: 100px;
     margin-left: 100px;
 }
 <\/style>
 <\/head>
 <body>
 <p>\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <p class=\"ex\">\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u7a7a\u767d\u663e\u793a\u3002<\/p>
 <\/body>
 <\/html>
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa\uff1a<\/strong>\n  <\/div>\n
\n
\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002 <\/p>\n
\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u7a7a\u767d\u663e\u793a\u3002<\/p>\n<\/p><\/div>\n
Margin\u7b80\u5199\u5c5e\u6027<\/h2>\n
\n    CSS\u7b80\u5199\u5c5e\u6027\u7528\u4e8e\u7f29\u77ed\u4ee3\u7801\u3002\u5b83\u5728\u4e00\u4e2a\u5c5e\u6027\u4e2d\u6307\u5b9a\u6240\u6709\u8fb9\u8ddd\u5c5e\u6027\u3002\n  <\/div>\n
\n    \u6709\u56db\u79cd\u7c7b\u578b\u53ef\u4ee5\u6307\u5b9amargin\u5c5e\u6027\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u5176\u4e2d\u4e4b\u4e00\u3002\n  <\/div>\n
  margin:50px 100px 150px 200px; <\/span>
\n  margin:50px 100px 150px; <\/span>
\n  margin:50px 100px; <\/span>
\n  margin:50px; <\/span> <\/p>\n
 1\uff09margin:50px 100px 150px 200px; <\/h2>\n
\n   top<\/strong>margin\u503c\u4e3a50px\n  <\/div>\n
\n   right<\/strong>margin\u503c\u4e3a100px\n  <\/div>\n
\n   bottom<\/strong>margin\u503c\u4e3a150px\n  <\/div>\n
\n   left<\/strong>margin\u503c\u4e3a200px\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
     background-color: pink;width:300px;
 }
 p.ex {
     margin: 50px 100px 150px 200px;
 }
 <\/style>
 <\/head>
 <body>
 <p>\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u6b64\u6bb5\u843d\u3002<\/p>
 <p class=\"ex\">\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <\/body>
 <\/html> 
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa\uff1a<\/strong>\n  <\/div>\n
\n
\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u6b64\u6bb5\u843d\u3002 <\/p>\n
\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>\n<\/p><\/div>\n
 2\uff09margin:50px 100px 150px; <\/h2>\n
\n   top<\/strong>margin\u503c\u4e3a50px\n  <\/div>\n
\n   left+right<\/strong>margin\u503c\u4e3a100px\n  <\/div>\n
\n   bottom<\/strong>margin\u503c\u4e3a150px\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
     background-color: pink;width:300px;
 }
 p.ex {
     margin: 50px 100px 150px;
 }
 <\/style>
 <\/head>
 <body>
 <p>\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <p class=\"ex\">\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <\/body>
 <\/html> 
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa\uff1a<\/strong>\n  <\/div>\n
\n
\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002 <\/p>\n
\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>\n<\/p><\/div>\n
\n    \u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002\n  <\/div>\n
\n    \u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002\n  <\/div>\n
 3\uff09\u8fb9\u8ddd\uff1a50px 100px; <\/h2>\n
\n    \u5b83\u6807\u8bc6\uff1a\n  <\/div>\n
\n   \u9876\u90e8\u548c\u5e95\u90e8<\/strong>\u8fb9\u8ddd\u503c\u4e3a50px\n  <\/div>\n
\n   \u5de6\u53f3<\/strong>\u8fb9\u8ddd\u503c\u4e3a100px\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
     background-color: pink;width:300px;
 }
 p.ex {
     margin: 50px 100px;
 }
 <\/style>
 <\/head>
 <body>
 <p>\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <p class=\"ex\">\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <\/body>
 <\/html> 
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa\uff1a<\/strong>\n  <\/div>\n
\n
\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002 <\/p>\n
\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>\n<\/p><\/div>\n
 4\uff09\u8fb9\u8ddd\uff1a50px\uff1b <\/h2>\n
\n    \u5b83\u6807\u8bc6\u51fa\uff1a\n  <\/div>\n
\n   \u53f3\u4e0a\u89d2\u5de6\u4e0b\u89d2\u548c\u5de6<\/strong>\u8fb9\u8ddd\u503c\u4e3a50px\n  <\/div>\n
\n
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
     background-color: pink;width:300px;
 }
 p.ex {
     margin: 50px;
 }
 <\/style>
 <\/head>
 <body>
 <p>\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <p class=\"ex\">\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>
 <\/body>
 <\/html> 
 <\/span><\/code><\/pre>\n<\/p><\/div>\n
\n   \u8f93\u51fa\uff1a<\/strong>\n  <\/div>\n
\n
\u6b64\u6bb5\u843d\u672a\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002 <\/p>\n
\u6b64\u6bb5\u843d\u4ee5\u6307\u5b9a\u7684\u8fb9\u8ddd\u663e\u793a\u3002<\/p>\n<\/p><\/div>\n
 <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[175],"tags":[],"class_list":["post-2365","post","type-post","status-publish","format-standard","hentry","category-css-jc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2365"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=2365"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/2365\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=2365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=2365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=2365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}