{"id":7006,"date":"2024-04-14T17:36:22","date_gmt":"2024-04-14T09:36:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7006"},"modified":"2024-04-14T17:36:22","modified_gmt":"2024-04-14T09:36:22","slug":"whitespace-margin-and-padding","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh\/whitespace-margin-and-padding\/","title":{"rendered":"\u7a7a\u767d\uff08\u908a\u8ddd\u548c\u586b\u5145\uff09"},"content":{"rendered":"
\n

\u60a8\u53ef\u4ee5\u5728\u300c\u6a23\u5f0f\u300d\u9762\u677f\u4e2d\u70ba\u6bcf\u500b\u5143\u7d20\u6307\u5b9a\u5167\u90e8\u548c\u5916\u90e8\u7684\u7a7a\u767d\uff08\u908a\u8ddd\u548c\u586b\u6eff\uff09\u3002 <\/p>\n

\u900f\u904e\u672c\u6559\u7a0b\uff0c\u60a8\u5c07\u638c\u63e1\uff1a<\/p>\n

    \n
  1. \u5c07\u7a7a\u683c\u5408\u4f75\u5230\u5143\u7d20\u4e2d\u7684\u6280\u8853<\/li>\n
  2. \u4fee\u6539\u7a7a\u767d\u55ae\u5143\u7684\u65b9\u6cd5<\/li>\n
  3. \u6709\u6548\u5229\u7528\u8ca0\u908a\u969b<\/li>\n
  4. \u61c9\u7528\u81ea\u52d5\u908a\u8ddd\u4f7f\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d <\/li>\n
  5. \u5075\u6e2c\u4e26\u4fee\u5fa9\u76f8\u9130\u5143\u7d20\u4e4b\u9593\u7684\u908a\u8ddd\u554f\u984c<\/li>\n<\/ol>\n
    \n
    <\/div>\n<\/figure>\n

    \u5c07\u7a7a\u683c\u6ce8\u5165\u5143\u7d20\u7684\u65b9\u6cd5<\/h2>\n

    \u7a7a\u767d\u5145\u7576\u5143\u7d20\u908a\u754c\u5916\u90e8\uff08\u908a\u8ddd\uff09\u6216\u5167\u90e8\uff08\u586b\u5145\uff09\u7684\u8996\u89ba\u547c\u5438\u7a7a\u9593 - \u60a8\u53ef\u4ee5\u9078\u64c7\u55ae\u7368\u8abf\u6574\u4e0d\u540c\u908a\u4e0a\u7684\u7a7a\u767d\uff0c\u4f5c\u70ba\u908a\u5c0d\u6216\u540c\u6642\u8abf\u6574\u6240\u6709\u908a\u3002<\/p>\n

    \u6574\u5408\u5404\u500b\u5074\u9762\u7684\u7a7a\u767d<\/h3>\n

    \u7576\u60a8\u53ea\u60f3\u5728\u5143\u7d20\u7684\u4e00\u5074\u6dfb\u52a0\u908a\u8ddd\u6216\u586b\u5145\u6642\uff1a<\/p>\n

      \n
    1. \u76f4\u63a5\u5728\u756b\u5e03\u4e0a\u9078\u64c7\u5143\u7d20 <\/li>\n
    2. \u5c07\u5167\u908a\u8ddd\u6216\u908a\u8ddd\u63a7\u5236\u5668\u62d6\u66f3\u5230\u8981\u4fee\u6539\u7684\u4e00\u5074<\/li>\n<\/ol>\n

      \u60a8\u4e5f\u53ef\u4ee5\u5f9e\u9810\u5148\u5b9a\u7fa9\u7684\u7a7a\u767d\u503c\u4e2d\u9032\u884c\u9078\u64c7\u6216\u624b\u52d5\u8abf\u6574\u586b\u6eff\u548c\u908a\u8ddd\uff1a<\/p>\n

        \n
      1. \u9078\u64c7\u908a\u8ddd\u6216\u586b\u6eff\u63a7\u5236\u5668<\/li>\n
      2. \u900f\u904e\u9ede\u64ca\u6216\u8f38\u5165\u81ea\u8a02\u503c\u4f86\u9078\u64c7\u9810\u5148\u5b9a\u7fa9\u7684\u7a7a\u767d\u503c<\/li>\n<\/ol>\n
        \n
        <\/div>\n<\/figure>\n

        \u5728\u4e92\u88dc\u5074\u6574\u5408\u7a7a\u767d<\/h3>\n

        \u82e5\u8981\u8b8a\u66f4\u4e92\u88dc\uff08\u76f8\u5c0d\uff09\u908a\u4e0a\u7684\u9593\u8ddd\uff1a <\/p>\n

          \n
        1. \u6293\u4f4f \u9078\u9805<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 \u66ff\u4ee3<\/strong> \uff08\u5728 Windows \u4e0a\uff09 <\/li>\n
        2. \u8abf\u6574\u908a\u8ddd\/\u586b\u6eff\u63a7\u5236\u5668\u4e4b\u4e00\uff0c\u9078\u64c7\u9810\u5148\u5b9a\u7fa9\u7684\u7a7a\u767d\u503c\uff0c\u6216\u63d2\u5165\u81ea\u8a02\u503c<\/li>\n<\/ol>\n
          \n
          <\/div>\n<\/figure>\n

          \u5c07\u6240\u6709\u908a\u4e0a\u7684\u7a7a\u767d\u6574\u5408\u5728\u4e00\u8d77<\/h3>\n

          \u60a8\u53ef\u4ee5\u900f\u904e\u6309\u4e0b\u5c07\u76f8\u540c\u7684\u503c\u7d71\u4e00\u61c9\u7528\u65bc\u5143\u7d20\u7684\u6240\u6709\u5074\u9762 \u8f49\u79fb<\/strong> \u4e26\u8abf\u6574\u55ae\u5074\u7684\u586b\u6eff\/\u908a\u8ddd\u3002\u6216\u8005\uff0c\u7576\u6301\u6709 \u8f49\u79fb<\/strong>\uff0c\u6309\u4e00\u4e0b\u4e00\u5074\u7684\u7a7a\u767d\u63a7\u5236\u5668\uff0c\u9078\u64c7\u9810\u5148\u5b9a\u7fa9\u503c\u6216\u8f38\u5165\u81ea\u8a02\u503c\u3002<\/p>\n

          \u4fee\u6539\u7a7a\u767d\u55ae\u5143\u7684\u4e0d\u540c\u9078\u9805<\/h2>\n

          \u9810\u8a2d\u60c5\u6cc1\u4e0b\uff0c\u7528\u65bc\u7a7a\u767d\u7684\u55ae\u4f4d\u662f\u50cf\u7d20 (px)\uff0c\u4f46\u60a8\u53ef\u4ee5\u5c07\u5176\u5207\u63db\u70ba\u55ae\u4f4d\u9078\u55ae\u4e2d\u986f\u793a\u7684\u4efb\u4f55\u55ae\u4f4d\u3002\u82e5\u8981\u5b58\u53d6\u6b64\u9078\u55ae\uff0c\u8acb\u6309\u4e00\u4e0b\u4efb\u4e00\u7a7a\u767d\u63a7\u5236\u5668\u4e26\u5728\u8f38\u5165\u6b04\u4f4d\u53f3\u5074\u9078\u64c7\u9069\u7576\u7684\u55ae\u4f4d\uff08\u4f8b\u5982\uff0cPX\u3001%\u3001EM\u3001VW \u6216VH\uff09\u3002<\/p>\n

          \n
          \"\u55ae\u4f4d\u9078\u55ae\u5c55\u958b\u4ee5\u986f\u793a\u9593\u8ddd\u55ae\u4f4d\u9078\u9805\uff1aPX\u3001%\u3001CH\u3001EM\u3001REM\u3001VW\u3001VH\u3001DVW<\/div>\n<\/figure>\n

          \u60a8\u4e5f\u53ef\u4ee5\u5728\u8f38\u5165\u6b04\u4f4d\u4e2d\u624b\u52d5\u8f38\u5165\u503c\u548c\u55ae\u4f4d\u3002\u5982\u679c\u60a8\u5e0c\u671b\u6240\u6709\u5074\u9762\u4f7f\u7528\u76f8\u540c\u7684\u55ae\u4f4d\uff0c\u8acb\u9ede\u64ca\u4e00\u5074\u7684\u7a7a\u767d\u63a7\u5236\u5668\uff0c\u7136\u5f8c\u6309 \u8f49\u79fb<\/strong>\uff0c\u8f38\u5165\u6240\u9700\u7684\u55ae\u4f4d\uff0c\u7136\u5f8c\u9ede\u9078 \u9032\u5165<\/strong>.<\/p>\n

          \u4e86\u89e3\u6709\u95dc\u8f38\u5165\u503c\u548c\u55ae\u4f4d\u7684\u66f4\u591a\u8cc7\u8a0a\u3002 <\/p>\n

          \u6e05\u9664\u7a7a\u767d\u503c<\/h3>\n

          \u900f\u904e\u6309\u4f4f\u63a7\u5236\u5668\u4e0a\u7684\u85cd\u8272\u503c\u4f86\u64e6\u9664\u4efb\u610f\u4e00\u5074\u7684\u7a7a\u767d\u503c \u66ff\u4ee3<\/strong> \uff08\u5728 Mac \u4e0a\uff09\u6216 \u9078\u9805<\/strong> \uff08\u5728 Windows \u4e0a\uff09\u3002<\/p>\n

          \u5229\u7528\u8ca0\u4fdd\u8b49\u91d1<\/h2>\n

          \u5411\u5143\u7d20\u5f15\u5165\u8ca0\u908a\u8ddd\u6703\u5c07\u5176\u5f9e\u9801\u9762\u4e0a\u7684\u9810\u8a2d\u4f4d\u7f6e\u79fb\u52d5\u3002\u4f7f\u7528\u8ca0\u503c\uff08\u4f8b\u5982-100\uff09\u5141\u8a31\u5143\u7d20\u91cd\u758a\u3002<\/p>\n

          \u5229\u7528\u81ea\u52d5\u908a\u8ddd\u4f7f\u5143\u7d20\u6c34\u5e73\u5c45\u4e2d<\/h2>\n

          \u81ea\u52d5\u908a\u8ddd\u8a2d\u5b9a\u88ab\u8b49\u660e\u662f\u4e00\u7a2e\u6709\u7528\u7684\u4f48\u5c40\u65b9\u6cd5\uff0c\u53ef\u4ee5\u7cbe\u78ba\u5c0d\u9f4a Flex \u9805\u76ee\u3002\u4f8b\u5982\uff0c\u7576\u4f7f\u7528 flex \u8655\u7406\u7236\u5143\u7d20\u4e2d\u7684\u591a\u500b\u6309\u9215\u6642\uff0c\u60a8\u53ef\u4ee5\u5728\u53f3\u5074\u548c\u5de6\u5074\u5be6\u73fe\u81ea\u52d5\u908a\u8ddd\uff0c\u5c07\u9019\u4e9b\u6309\u9215\u653e\u7f6e\u5728\u7236\u5143\u7d20\u7684\u4e2d\u5fc3\uff0c\u5f9e\u800c\u5728\u5b83\u5011\u4e4b\u9593\u5747\u52fb\u5206\u914d\u5269\u9918\u7a7a\u9593\u3002<\/p>\n

          \u5143\u7d20\u7684\u6c34\u5e73\u5c45\u4e2d\u53ef\u4ee5\u900f\u904e\u5229\u7528 \u4e2d\u5fc3\u5143\u7d20\u6309\u9215<\/strong> \u5728\u88e1\u9762 \u98a8\u683c\u9762\u677f<\/strong> > \u7a7a\u767d<\/strong>\u3002\u6b64\u6309\u9215\u5c07\u5143\u7d20\u7684\u5de6\u53f3\u908a\u8ddd\u914d\u7f6e\u70ba\u81ea\u52d5\uff0c\u4fdd\u6301\u986f\u793a\u5c6c\u6027\u4e0d\u8b8a\u3002\u908a\u8ddd\u5c07\u81ea\u52d5\u4f54\u64da\u53ef\u7528\u7a7a\u9593\u3002<\/p>\n

          \n
          <\/div>\n<\/figure>\n

          \u4e86\u89e3\u6709\u95dc Flex \u81ea\u52d5\u908a\u8ddd\u6280\u8853\u7684\u66f4\u591a\u8cc7\u8a0a\u3002<\/p>\n

          \u63d0\u9192\uff1a <\/strong>\u7531\u65bc\u5167\u806f\u8a2d\u5b9a\u4e2d\u7f3a\u5c11\u6c34\u5e73\u7a7a\u9593\uff0c\u56e0\u6b64\u4f7f\u7528\u5167\u806f\uff08\u5167\u806f\u5340\u584a\uff09\u986f\u793a\u5c6c\u6027\u7684\u5143\u7d20\u7121\u6cd5\u4f7f\u7528\u300c\u4e2d\u5fc3\u5143\u7d20\u300d\u6309\u9215\uff08\u81ea\u52d5\u908a\u8ddd\uff09\u5c45\u4e2d\u3002<\/h6>\n

          \u5982\u4f55\u89e3\u6c7a\u76f8\u9130\u5143\u7d20\u4e4b\u9593\u7684\u908a\u8ddd\u554f\u984c<\/h2>\n

          \u67d0\u4e9b\u60c5\u6cc1\u6703\u5c0e\u81f4\u76f8\u9130\u5143\u7d20\u908a\u8ddd\u5408\u4f75\u4ee5\u5efa\u7acb\u7d71\u4e00\u7684\u908a\u8ddd\u3002\u9019\u88ab\u7a31\u70ba\u908a\u8ddd\u6298\u758a\uff0c\u53ef\u80fd\u6703\u5c0e\u81f4\u6df7\u4e82\uff0c\u56e0\u70ba\u5b83\u5728\u67d0\u4e9b\u60c5\u6cc1\u4e0b\u53ef\u80fd\u6703\u88ab\u8986\u84cb\uff0c\u800c\u5728\u5176\u4ed6\u60c5\u6cc1\u4e0b\u5247\u4e0d\u6703\u3002\u76f8\u9130\u7db2\u683c\u5b50\u9805\u7684\u908a\u8ddd\u4e0d\u6703\u584c\u9677\u3002<\/p>\n

          \u7576\u9801\u8173\u5167\u5bb9\u5728\u8a2d\u8a08\u5668\u4e2d\u4e0d\u53ef\u898b\u4e14\u7121\u6cd5\u5b58\u53d6\u6642\uff0c\u5c31\u6703\u51fa\u73fe\u4e00\u500b\u5e38\u898b\u554f\u984c\u3002\u7576\u5c0e\u822a\u6b04\u7d55\u5c0d\u5b9a\u4f4d\u6642\uff0c\u901a\u5e38\u6703\u767c\u751f\u9019\u7a2e\u60c5\u6cc1\uff0c\u5c07\u5167\u5bb9\u63a8\u5230\u9801\u9762\u5e95\u90e8\u7684 Body \u5143\u7d20\u4e4b\u5916\u3002\u70ba\u4e86\u9632\u6b62\u9019\u7a2e\u60c5\u6cc1\uff0c\u5982\u679c\u9801\u9762\u4e0a\u7684\u521d\u59cb\u5143\u7d20\u7f3a\u4e4f\u56fa\u5b9a\u4f4d\u7f6e\uff0c\u8acb\u907f\u514d\u70ba\u5176\u6dfb\u52a0\u4e0a\u908a\u8ddd\u3002\u76f8\u53cd\uff0c\u8acb\u5728 Body \u5143\u7d20\u4e0a\u6dfb\u52a0\u9802\u90e8\u5167\u908a\u8ddd\u3002<\/p>\n

          \u4e86\u89e3\u6709\u95dc\u908a\u8ddd\u6298\u758a\u7684\u66f4\u591a\u4fe1\u606f<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"\u4f7f\u7528\u908a\u8ddd\u548c\u586b\u6eff\u5c6c\u6027\u5efa\u7acb\u5177\u6709\u4e00\u81f4\u9593\u8ddd\u7684\u97ff\u61c9\u5f0f\u5167\u5bb9\u3002","protected":false},"author":2,"featured_media":7007,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-7006","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/7006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/comments?post=7006"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/7006\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media\/7007"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media?parent=7006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/categories?post=7006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/tags?post=7006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}