เหตุใด CSS จึงไม่รองรับการเว้นช่องว่างเชิงลบ

ฉันเห็นหลายครั้งแล้วว่าโอกาสในการเพิ่มช่องว่างในเชิงลบอาจช่วยให้การพัฒนา CSS ขององค์ประกอบหน้าบางอย่างดีขึ้นและง่ายขึ้น อย่างไรก็ตามไม่มีข้อกำหนดสำหรับการเว้นวรรคเชิงลบใน W3C CSS เหตุผลเบื้องหลังนี้คืออะไร? มีสิ่งกีดขวางคุณสมบัติที่ทำให้ไม่สามารถใช้งานได้หรือไม่? ขอบคุณสำหรับคำตอบ

อัปเดต

ตามที่ฉันเห็นตัวอย่างเช่นในกรณีที่คุณใช้ฟอนต์ที่มีอะไรบางอย่างเช่นเว้นระยะห่างแนวตั้ง 20px และคุณต้องการใช้เส้นขอบประกับด้านล่างของฟอนต์ให้พูดเมื่อไฮเปอร์ลิงก์ปรากฏขึ้น ในกรณีเช่นนี้คุณจะพบว่าสไตล์นั้นดูซอมซ่อเกินไปเนื่องจากเส้นประจะปรากฏใต้คำที่ระบุ 20px หากคุณใช้ระยะขอบติดลบจะไม่ได้ผลเนื่องจากระยะขอบจะเปลี่ยนพื้นที่นอกเส้นขอบ ช่องว่างภายในเชิงลบอาจช่วยได้ในสถานการณ์เช่นนี้

เมื่อเร็ว ๆ นี้ฉันได้ตอบคำถามอื่นที่ฉันได้พูดคุยว่าทำไมรูปแบบกล่องถึงเป็นอย่างนั้น

มีเหตุผลเฉพาะสำหรับแต่ละส่วนของรูปแบบกล่อง Padding หมายถึงการขยายพื้นหลังเกินเนื้อหา หากคุณต้องการลดขนาดพื้นหลังของคอนเทนเนอร์คุณควรทำให้คอนเทนเนอร์หลักมีขนาดที่ถูกต้องและกำหนดระยะขอบเชิงลบให้องค์ประกอบลูก ในกรณีนี้เนื้อหาไม่ได้ถูกหุ้มไว้แสดงว่ามันล้นออกมา

Padding ตามความหมายคือจำนวนเต็มบวก (รวม 0)

ช่องว่างภายในเชิงลบจะทำให้เส้นขอบยุบลงในเนื้อหา (ดูหน้าโมเดลกล่องใน w3) ซึ่งจะทำให้พื้นที่เนื้อหาเล็กกว่าเนื้อหาซึ่งไม่สมเหตุสมผล

ฉันอยากจะอธิบายตัวอย่างที่ดีมากว่าทำไมถึงnegative paddingมีประโยชน์และยอดเยี่ยม

อย่างที่พวกเรานักพัฒนา CSS ทุกคนทราบกันดีว่าการปรับขนาด div ในแนวตั้งแบบไดนามิกภายในอีกรูปแบบหนึ่งนั้นเป็นเรื่องยุ่งยากและส่วนใหญ่มองว่าเป็นไปไม่ได้ที่จะใช้ CSS เท่านั้น การรวมตัวกันnegative paddingสามารถเปลี่ยนแปลงสิ่งนี้ได้

โปรดตรวจสอบ HTML ต่อไปนี้:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

ด้วย CSS ต่อไปนี้เราจะสามารถจัดกึ่งกลางเนื้อหาของด้านในdivภายในด้านนอกในแนวตั้งdiv:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

ให้ฉันอธิบาย ...

การวางตำแหน่งด้านบนของ div ด้านในอย่างแน่นอนที่ 50% จะทำให้ขอบด้านบนของ div ด้านในอยู่ตรงกลาง div ด้านนอก ค่อนข้างเรียบง่าย เพราะนี่คือการวางตำแหน่งตามเปอร์เซ็นต์เมื่อเทียบกับขนาดภายในขององค์ประกอบหลัก

ร้อยละ padding ตามบนมืออื่น ๆ ที่อยู่บนพื้นฐานของมิติภายในขององค์ประกอบที่กำหนดเป้าหมาย ดังนั้นโดยการใช้คุณสมบัติของpadding-top: -50%;เราได้เลื่อนเนื้อหาของ div ชั้นในขึ้นโดยระยะทาง 50% ของความสูงของเนื้อหา div ภายในดังนั้นการจัดกึ่งกลางเนื้อหาของ div ภายในภายใน div ด้านนอกและยังคงให้มิติความสูงของ div ภายในให้มีชีวิตชีวา!

ถ้าคุณถามฉันว่า OP นี่เป็นกรณีการใช้งานที่ดีที่สุดและฉันคิดว่ามันควรจะใช้งานได้เพื่อที่ฉันจะได้แฮ็คนี้ ฮ่า ๆ. หรือควรแก้ไขฟังก์ชันการทำงานvertical-alignและให้เวอร์ชันvertical-alignที่ใช้ได้กับทุกองค์ประกอบ

คุณถามว่าทำไมถึงไม่โกง:

โดยปกติจะเป็นเพราะความเกียจคร้านของโปรแกรมเมอร์ในการใช้งานครั้งแรกเนื่องจากพวกเขาได้ใช้ความพยายามมากขึ้นในคุณสมบัติอื่น ๆ แล้วส่งผลข้างเคียงที่แปลกมากขึ้นเช่นการลอยตัวเนื่องจากนักออกแบบได้รับการร้องขอมากกว่าในตอนนั้น แต่พวกเขาก็ยังไม่ได้ใช้เวลา เพื่ออนุญาตสิ่งนี้เพื่อให้เราสามารถใช้คุณสมบัติ FOUR เพื่อผลัก / ดึงองค์ประกอบกับเพื่อนบ้าน (ตอนนี้เรามีเพียงสี่ที่จะผลักดันและดึงเพียง 2)

เมื่อ html ได้รับการออกแบบนิตยสารก็ชอบการแสดงข้อความรอบ ๆ รูปภาพในตอนนั้นตอนนี้เกลียดเพราะวันนี้เรามีเทรนด์การสัมผัสและชอบสิ่งที่มีพื้นที่กว้างขวางและไม่มีอะไรให้อ่าน นั่นเป็นเหตุผลที่พวกเขากดดันการลอยมากกว่าการวางตรงกลางหรืออาจออกแบบบางอย่างเช่นmargin-top: fill;หรือmargin: average 0;เพียงแค่จัดแนวเนื้อหาให้อยู่ด้านล่างหรือกระจายพื้นที่เพิ่มเติมรอบ ๆ

ในกรณีนี้ฉันคิดว่ามันไม่ได้ถูกนำมาใช้เนื่องจากเหตุผลเดียวกับที่ทำให้ CSS ขาด:parentตัวเลือกหลอก: เพื่อป้องกันการประเมินแบบวนซ้ำ

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

นั่นเป็นเหตุผลที่ (ฉันเดา) ช่องว่างภายในคำนวณจากความกว้างเพราะนั่นคือค่าที่มีให้ในตอนที่เริ่มวาด

หากคุณมีค่าเป็นลบสำหรับช่องว่างภายในจะมีผลต่อขีด จำกัด ภายนอกซึ่งมีการกำหนด ALREADY ไว้แล้วเมื่อกำหนดระยะขอบแล้ว ฉันรู้ว่ายังไม่มีการทาสีใด ๆ แต่เมื่อคุณอ่านวิธีการวาดภาพที่สร้างโดยอัจฉริยะด้วยเทคโนโลยียุค 90 ฉันรู้สึกเหมือนกำลังถามคำถามโง่ ๆ และแค่พูดว่า "ขอบคุณ" ฮิฮิ

ข้อกำหนดประการหนึ่งของหน้าเว็บคือสามารถใช้งานได้อย่างรวดเร็วซึ่งแตกต่างจากแอปที่ใช้เวลาและกินทรัพยากรของคอมพิวเตอร์เพื่อให้ทุกอย่างถูกต้องก่อนที่จะแสดงหน้าเว็บต้องใช้ทรัพยากรเพียงเล็กน้อย (จึงพอดีกับทุกอุปกรณ์ เป็นไปได้) และเลื่อนได้อย่างง่ายดาย

หากคุณเห็นแอปพลิเคชั่นที่มีการปรับแต่งและการวางตำแหน่งที่ซับซ้อนเช่น InDesign คุณจะเลื่อนเร็วขนาดนั้นไม่ได้! ต้องใช้ความพยายามอย่างมากทั้งจากโปรเซสเซอร์และกราฟิกการ์ดเพื่อข้ามไปยังหน้าถัดไป!

ดังนั้นการวาดภาพและคำนวณไปข้างหน้าและลืมเกี่ยวกับองค์ประกอบที่วาดครั้งเดียวตอนนี้ดูเหมือนว่าจะต้องเป็น

สิ่งนี้สามารถช่วยได้:

กล่องขนาดคุณสมบัติ CSS จะใช้ในการปรับเปลี่ยนรูปแบบกล่อง CSS เริ่มต้นที่ใช้ในการคำนวณความกว้างและความสูงขององค์ประกอบ

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

การติดตั้ง Iframe ภายในคอนเทนเนอร์จะไม่ตรงกับขนาดของคอนเทนเนอร์ เพิ่มช่องว่างภายในประมาณ 20px ขณะนี้ไม่มีวิธีง่ายๆในการแก้ไขปัญหานี้ คุณต้องใช้จาวาสคริปต์ ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

ระยะขอบติดลบจะเป็นทางออกที่ง่าย

เนื่องจากนักออกแบบ CSS ไม่ได้มองการณ์ไกลถึงความยืดหยุ่นที่จะเกิดขึ้น มีเหตุผลมากมายที่จะขยายพื้นที่เนื้อหาของกล่องโดยไม่ส่งผลกระทบต่อความสัมพันธ์กับองค์ประกอบใกล้เคียง หากคุณคิดว่าเป็นไปไม่ได้ให้ใส่nowrapข้อความยาว ๆลงในกล่องตั้งค่าความกว้างบนกล่องและดูว่าเนื้อหาที่มากเกินไปไม่ได้ทำอะไรกับเค้าโครง

ใช่สิ่งนี้ยังคงเกี่ยวข้องกับ CSS3 ในปี 2019 case in point: เค้าโครง flexbox ระยะขอบของรายการ Flexbox จะไม่ยุบดังนั้นเพื่อที่จะเว้นระยะห่างเท่า ๆ กันและจัดแนวให้ตรงกับขอบที่มองเห็นของคอนเทนเนอร์เราต้องลบระยะขอบของรายการออกจากช่องว่างภายในของคอนเทนเนอร์ หากผลลัพธ์ใด ๆ เป็น <0 คุณต้องใช้ระยะขอบลบบนคอนเทนเนอร์หรือรวมค่าลบนั้นกับระยะขอบที่มีอยู่ กล่าวคือเนื้อหาขององค์ประกอบมีผลต่อการกำหนดระยะขอบขององค์ประกอบซึ่งเป็นการย้อนกลับ การสรุปไม่ได้ผลอย่างสมบูรณ์เมื่อเนื้อหาขององค์ประกอบแบบยืดหยุ่นมีระยะขอบที่กำหนดไว้ในหน่วยต่างๆหรือได้รับผลกระทบจากขนาดตัวอักษรที่แตกต่างกันเป็นต้น

ตัวอย่างด้านล่างนี้ควรมีการจัดตำแหน่งกล่องสีเทาและเว้นระยะเท่า ๆ กัน แต่น่าเสียดายที่กล่องเหล่านั้นไม่ได้

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

ฉันพบปัญหาเล็กน้อยเหล่านี้มากพอในช่วงหลายปีที่การเว้นช่องว่างเชิงลบเล็กน้อยจะหายไปนาน แต่ฉันถูกบังคับให้เพิ่มมาร์กอัปที่ไม่ใช่ความหมายการใช้งานcalc()หรือตัวประมวลผลล่วงหน้า CSS ซึ่งจะใช้ได้เฉพาะเมื่อหน่วยเหมือนกัน ฯลฯ