ล่าสุดการพัฒนาเว็บบทเรียน
×

JavaScript การอ้างอิง

ภาพรวม

JavaScript

JS เชือก JS จำนวน JS ผู้ประกอบการ JS งบ JS คณิตศาสตร์ JS วันที่ JS แถว JS บูลีน JS นิพจน์ทั่วไป JS สถานการณ์โดยรวม JS การแปลง

เบราว์เซอร์ BOM

Window Navigator Screen History Location

HTML DOM

DOM เอกสาร DOM องค์ประกอบ DOM แอตทริบิวต์ DOM เหตุการณ์ DOM รูปแบบ

HTML วัตถุ

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

วัตถุอื่น ๆ

CSSStyleDeclaration


 

Style padding Property

<สไตล์วัตถุ

ตัวอย่าง

ตั้ง padding ของที่ <div> องค์ประกอบ:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
ลองตัวเอง»

ความหมายและการใช้งาน

ชุดคุณสมบัติ padding หรือผลตอบแทน padding ของธาตุนั้น

คุณสมบัตินี้อาจใช้เวลา 1-4 ค่า:

ทั้งคุณสมบัติและอัตรากำไรขั้นต้นพื้นที่แทรกคุณสมบัติ padding รอบองค์ประกอบ อย่างไรก็ตามความแตกต่างคือการที่อัตรากำไรแทรกพื้นที่รอบ ๆ ชายแดนในขณะที่ช่องว่างแทรกพื้นที่ภายในเส้นขอบของสิ่งนั้น ๆ

  • ค่าหนึ่งที่ชอบ: div {padding: 50px} - ทั้งสี่ด้านจะมีช่องว่างของ 50px
  • สองค่าเช่น: div {padding: 50px 10px} - ด้านบนและด้านล่าง padding จะ 50px ซ้ายและช่องว่างด้านขวาจะเป็น 10px
  • สามค่าที่ชอบ: div {padding: 50px 10px 20px} - ช่องว่างภายในด้านบนจะเป็น 50px ซ้ายและช่องว่างด้านขวาจะเป็น 10px รองด้านล่างจะเป็น 20px
  • สี่ค่าเช่น: div {padding: 50px 10px 20px 30px} - ช่องว่างภายในด้านบนจะเป็น 50px, padding ขวาจะ 10px รองด้านล่างจะเป็น 20px, padding ซ้ายจะ 30px

สนับสนุนเบราว์เซอร์

Internet ExplorerFirefoxOperaGoogle ChromeSafari

คุณสมบัติ padding ได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด


วากยสัมพันธ์

คืนทรัพย์สิน padding นี้:

object .style.padding

ตั้งค่าคุณสมบัติ padding นี้:

object .style.padding=" ค่าทรัพย์สิน
ความคุ้มค่า ลักษณะ
% กำหนดช่องว่างใน% ของความกว้างขององค์ประกอบหลักที่
length กำหนดช่องว่างในหน่วยความยาว
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก

รายละเอียดทางเทคนิค

ราคาเริ่มต้น: 0
กลับค่า: สตริงตัวแทน padding ของธาตุนั้น
CSS รุ่น CSS1

ตัวอย่างอื่น ๆ

ตัวอย่าง

เปลี่ยนช่องว่างของทั้งสี่ด้านของการเป็น <div> องค์ประกอบ "25px" :

document.getElementById("myDiv").style.padding = "25px";
ลองตัวเอง»

ตัวอย่าง

กลับ padding ของที่ <div> องค์ประกอบ:

alert(document.getElementById("myDiv").style.padding);
ลองตัวเอง»

ตัวอย่าง

ความแตกต่างระหว่างคุณสมบัติขอบและทรัพย์สิน padding นี้:

function changeMargin() {
    document.getElementById("myDiv").style.margin = "100px";
}

function changePadding() {
    document.getElementById("myDiv2").style.padding = "100px";
}
ลองตัวเอง»

หน้าเว็บที่เกี่ยวข้อง

CSS กวดวิชา: CSS Padding

อ้างอิง CSS: padding property


<สไตล์วัตถุ