import{S as rs,i as ps,s as ns,C as O,w as is,x as cs,y as fs,z as ms,A as Y,f as ds,t as us,B as Fs,X as ss,l as n,r as h,a as u,V as ls,m as i,n as c,u as D,h as l,c as F,W as es,p as T,b as o,G as f,E as _s}from"../chunks/index-cd58b8d1.js";import{P as vs}from"../chunks/post_layout-9085e57e.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/post_card-e7f4525a.js";import"../chunks/posts-57ab4794.js";import"../chunks/icon-3aa13b39.js";import"../chunks/head-4a058b17.js";import"../chunks/footer-1abd9501.js";function ys(E){let e,m,d,r,a,p,_,$,ts=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">button</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">btn helper</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">Text</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">button</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,H,v,x,Z,k,g,os=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">helper</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">margin-right</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">1.6rem</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,A,y,C,j,B,b,q,M,S,z,L,w,P,G;return{c(){e=n("p"),m=h("\u7528 helper class \u4E3A\u5355\u4E2A\u6309\u94AE\u52A0 margin\uFF0C\u9632\u6B62\u5143\u7D20\u590D\u7528\u65F6\u4EA7\u751F\u4E0D\u5FC5\u8981\u7684 margin"),d=u(),r=n("h2"),a=n("a"),p=h("HTML"),_=u(),$=new ls(!1),H=u(),v=n("h2"),x=n("a"),Z=h("CSS"),k=u(),g=new ls(!1),A=u(),y=n("h2"),C=n("a"),j=h("\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD"),B=u(),b=n("p"),q=h("\u5982\u679C\u8BBE\u7F6E border \u6570\u503C\u4E3A\u8D1F\uFF0C\u5468\u8FB9\u7A7A\u95F4\u5219\u4F1A\u6536\u5230\u5F71\u54CD\uFF0C\u4F46\u7528 box-shadow \u5C31\u4E0D\u4F1A:"),M=u(),S=n("p"),z=h("\u6240\u4EE5\u53EF\u4EE5\u8FD9\u6837\u8BBE\u7F6E\uFF1A"),L=u(),w=n("p"),P=n("code"),G=h("box-shadow: inset 0 0 0 3px #fff;"),this.h()},l(s){e=i(s,"P",{});var t=c(e);m=D(t,"\u7528 helper class \u4E3A\u5355\u4E2A\u6309\u94AE\u52A0 margin\uFF0C\u9632\u6B62\u5143\u7D20\u590D\u7528\u65F6\u4EA7\u751F\u4E0D\u5FC5\u8981\u7684 margin"),t.forEach(l),d=F(s),r=i(s,"H2",{id:!0});var V=c(r);a=i(V,"A",{href:!0});var W=c(a);p=D(W,"HTML"),W.forEach(l),V.forEach(l),_=F(s),$=es(s,!1),H=F(s),v=i(s,"H2",{id:!0});var X=c(v);x=i(X,"A",{href:!0});var I=c(x);Z=D(I,"CSS"),I.forEach(l),X.forEach(l),k=F(s),g=es(s,!1),A=F(s),y=i(s,"H2",{id:!0});var J=c(y);C=i(J,"A",{href:!0});var K=c(C);j=D(K,"\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD"),K.forEach(l),J.forEach(l),B=F(s),b=i(s,"P",{});var N=c(b);q=D(N,"\u5982\u679C\u8BBE\u7F6E border \u6570\u503C\u4E3A\u8D1F\uFF0C\u5468\u8FB9\u7A7A\u95F4\u5219\u4F1A\u6536\u5230\u5F71\u54CD\uFF0C\u4F46\u7528 box-shadow \u5C31\u4E0D\u4F1A:"),N.forEach(l),M=F(s),S=i(s,"P",{});var Q=c(S);z=D(Q,"\u6240\u4EE5\u53EF\u4EE5\u8FD9\u6837\u8BBE\u7F6E\uFF1A"),Q.forEach(l),L=F(s),w=i(s,"P",{});var R=c(w);P=i(R,"CODE",{});var U=c(P);G=D(U,"box-shadow: inset 0 0 0 3px #fff;"),U.forEach(l),R.forEach(l),this.h()},h(){T(a,"href","#html"),T(r,"id","html"),$.a=H,T(x,"href","#css"),T(v,"id","css"),g.a=A,T(C,"href","#\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD"),T(y,"id","\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD")},m(s,t){o(s,e,t),f(e,m),o(s,d,t),o(s,r,t),f(r,a),f(a,p),o(s,_,t),$.m(ts,s,t),o(s,H,t),o(s,v,t),f(v,x),f(x,Z),o(s,k,t),g.m(os,s,t),o(s,A,t),o(s,y,t),f(y,C),f(C,j),o(s,B,t),o(s,b,t),f(b,q),o(s,M,t),o(s,S,t),f(S,z),o(s,L,t),o(s,w,t),f(w,P),f(P,G)},p:_s,d(s){s&&l(e),s&&l(d),s&&l(r),s&&l(_),s&&$.d(),s&&l(H),s&&l(v),s&&l(k),s&&g.d(),s&&l(A),s&&l(y),s&&l(B),s&&l(b),s&&l(M),s&&l(S),s&&l(L),s&&l(w)}}}function hs(E){let e,m;const d=[E[0],as];let r={$$slots:{default:[ys]},$$scope:{ctx:E}};for(let a=0;a<d.length;a+=1)r=O(r,d[a]);return e=new vs({props:r}),{c(){is(e.$$.fragment)},l(a){cs(e.$$.fragment,a)},m(a,p){fs(e,a,p),m=!0},p(a,[p]){const _=p&1?ms(d,[p&1&&Y(a[0]),p&0&&Y(as)]):{};p&2&&(_.$$scope={dirty:p,ctx:a}),e.$set(_)},i(a){m||(ds(e.$$.fragment,a),m=!0)},o(a){us(e.$$.fragment,a),m=!1},d(a){Fs(e,a)}}}const as={title:"CSS \xB7 Add margin to buttons",slug:"/margin.md",tags:["CSS Trick","CSS"],created:"2022-01-13T10:04:21.000Z",summary:"\u7528helper class\u4E3A\u5355\u4E2A\u6309\u94AE\u52A0margin\uFF0C\u9632\u6B62\u5143\u7D20\u590D\u7528\u65F6\u4EA7\u751F\u4E0D\u5FC5\u8981\u7684margin",lastmod:"2022-05-07T05:32:49.156Z",path:"/margin",toc:[{depth:2,title:"HTML",slug:"html"},{depth:2,title:"CSS",slug:"css"},{depth:2,title:"\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD",slug:"\u4E3A\u6309\u94AE\u589E\u52A0\u5185\u8FB9\u8DDD"}],updated:"2022-08-06T10:49:40.186Z"};function Ds(E,e,m){return E.$$set=d=>{m(0,e=O(O({},e),ss(d)))},e=ss(e),[e]}class As extends rs{constructor(e){super(),ps(this,e,Ds,hs,ns,{})}}export{As as default,as as metadata};