單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。
1. Margin(或padding) : 上 右 下 左；(四個值不同)
2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)
3. Margin(或padding

觀點

職場產業

創作

<div class="draft-block draft--p left">單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。</div>
<div class="draft-block draft--p left">1. Margin(或padding) : 上 右 下 左；(四個值不同)</div>
<div class="draft-block draft--p left">2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)</div>
<div class="draft-block draft--p left">3. Margin(或padding) : 上下 左右；(上下值相同、左右值相同)</div>
<div class="draft-block draft--p left">4. Margin(或padding) : 上下左右；(四個值均相同)</div>
<h3 class="draft-block draft--h3" name="header-7tm3e">1.Margin(或padding) : 上 右 下 左；(四個值不同)</h3>
<div class="draft-block draft--p left">範例 / Margin : 10px 20px 30px 40 px;</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1131px" class="image-block-prerender" data-src="https://images.vocus.cc/c3a17eed-a313-4d5d-93ee-98e81bee2b69.jpg" data-width="1131" data-height="296" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-7e2lo">2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)</h3>
<div class="draft-block draft--p left">範例 / Padding : 10px 20px 30px;</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1007px" class="image-block-prerender" data-src="https://images.vocus.cc/d54d6a76-8f4e-44b7-9d76-55b9c7f23124.jpg" data-width="1007" data-height="252" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-dv7gv">3. Margin(或padding) : 上下 左右；(上下值相同、左右值相同)</h3>
<div class="draft-block draft--p left">範例 / Padding : 10px 20px;</div>
<div class="draft--imgNormal draft-block"><div><div style="height:812px" class="image-block-prerender" data-src="https://images.vocus.cc/4e5547b3-5c06-4f2b-9fd1-94d354a6984c.jpg" data-width="812" data-height="241" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-7612r">4. Margin(或padding) : 上下左右；(四個值均相同)</h3>
<div class="draft-block draft--p left">範例 / Margin : 10px;</div>
<div class="draft--imgNormal draft-block"><div><div style="height:923px" class="image-block-prerender" data-src="https://images.vocus.cc/98be4fce-c0f0-40bb-a933-8327bff0c465.jpg" data-width="923" data-height="344" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A" target="_blank" class="draft--a">精修DIV+CSS網頁排版設計輕鬆做</a></div>

<p>單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。</p>
<p>1. Margin(或padding) : 上 右 下 左；(四個值不同)</p>
<p>2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)</p>
<p>3. Margin(或padding) : 上下 左右；(上下值相同、左右值相同)</p>
<p>4. Margin(或padding) : 上下左右；(四個值均相同)</p>
<h3>1.Margin(或padding) : 上 右 下 左；(四個值不同)</h3>
<p>範例 / Margin : 10px 20px 30px 40 px;</p>
<p><br></p>
<h3>2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)</h3>
<p>範例 / Padding : 10px 20px 30px;</p>
<p><br></p>
<h3>3. Margin(或padding) : 上下 左右；(上下值相同、左右值相同)</h3>
<p>範例 / Padding : 10px 20px;</p>
<p><br></p>
<h3>4. Margin(或padding) : 上下左右；(四個值均相同)</h3>
<p>範例 / Margin : 10px;</p>
<p><br></p>
<p>相關課程 : <a href="https://www.uuu.com.tw/Course/Show/687/%E7%B2%BE%E4%BF%AEDIV-CSS%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E8%A8%AD%E8%A8%88%E8%BC%95%E9%AC%86%E5%81%9A">精修DIV+CSS網頁排版設計輕鬆做</a></p>

單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。

1. Margin(或padding) : 上 右 下 左；(四個值不同)

2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)

3. Margin(或padding) : 上下 左右；(上下值相同、左右值相同)

4. Margin(或padding) : 上下左右；(四個值均相同)

1.Margin(或padding) : 上 右 下 左；(四個值不同)

相關課程 : 精修DIV+CSS網頁排版設計輕鬆做