ไม่สนใจช่องว่างระหว่างผู้ปกครอง

127

ฉันกำลังพยายามทำให้กฎแนวนอนของฉันไม่สนใจช่องว่างในหลัก

นี่คือตัวอย่างง่ายๆของสิ่งที่ฉันมี:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

คุณจะพบว่ากฎแนวนอนขยายออกมาจากระดับบนสุด 10px ฉันพยายามทำให้มันเพิกเฉยต่อช่องว่างภายในที่ทุกอย่างใน div แม่ต้องการ

ฉันรู้ว่าฉันสามารถสร้าง div แยกสำหรับอย่างอื่นได้ นี่ไม่ใช่วิธีแก้ปัญหาที่ฉันกำลังมองหา

html css

— แซม
แหล่งที่มา

160

แก้ไขง่ายแค่ทำ

margin:-10px

ในชม.

— แซม
แหล่งที่มา

9

วิธีนี้ใช้งานได้ แต่ปัญหาคือจะไม่ขยายความยาวเต็มของ div ระดับบนสุด นี่เป็นเพราะช่องว่างภายในไม่รวมอยู่ในความกว้าง 100px ซึ่งหมายความว่าจริงๆแล้วมันกว้าง 120px และของคุณ<hr>จะเป็น 20px จากท้าย div ของคุณ ดู jsFiddle นี้สำหรับสิ่งที่ฉันหมายถึง: jsfiddle.net/YVrWy/1

— Alastair Pitts

ใช่ฉันได้ผลเมื่อฉันเพิ่มเข้าไป; ความกว้างไม่เกี่ยวข้อง

— แซม

22

หากคุณต้องการความกว้าง 100% เพียงแค่ใช้ auto เป็นแอตทริบิวต์ width ความกว้างจะคำนวณตามระยะขอบที่กำหนด

— schlingel

4

คุณควรทำบางสิ่งเช่น ... margin: 0 -15px; ..... มิฉะนั้น hr ในแนวตั้งจะดูดเนื้อหาที่อยู่ติดกันเข้าหามัน

— honkskillet

แฮ็กเลย ขอให้มีวิธีที่ดีกว่านี้

— oldboy

29

เพื่อจุดประสงค์ด้านภาพคุณสามารถทำสิ่งนี้ได้

img {
    width: calc(100% + 20px); // twice the value of the parent's padding
    margin-left: -10px; // -1 * parent's padding
}

— adriancho5692
แหล่งที่มา

8

แต่ถ้าคุณไม่จำเป็นต้องรู้ช่องว่างของผู้ปกครองล่ะ?

1

สิ่งนี้ใช้ได้ผลสำหรับฉันเมื่อฉันใช้ความกว้างต่ำสุดแทนที่จะเป็นแค่ความกว้าง

— Pedro Nadolny

@ user5707327 คุณสามารถรวมสไตล์กับ javascript เพื่อรับ padding ของผู้ปกครองได้

— เสมอ

ว้าวการใช้ความกว้างเชิงลบอย่างอัจฉริยะ!

— Mr PizzaGuy

9

โดยส่วนใหญ่คำถามนี้ทุกคนได้รับคำตอบ แต่ในส่วนเล็ก ๆ ฉันจัดการกับเรื่องนี้เมื่อครู่

ฉันต้องการมีถาดปุ่มที่ด้านล่างของแผงที่แผงมี 30px อยู่รอบ ๆ ถาดกระดุมต้องอยู่ด้านล่างและด้านข้าง

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

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

— Mitchell Geere
แหล่งที่มา

7

ช้าไปหน่อย แต่ต้องใช้คณิตศาสตร์นิดหน่อย

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

ฉันไม่มี Windows ดังนั้นฉันจึงไม่ได้ทดสอบใน IE

fiddle: ซอตัวอย่าง ..

— sqram
แหล่งที่มา

1

คุณควรแบ่ง padding-right: 60px เป็น padding-left: 30px; padding-right: 30px เพื่อไม่ให้เนื้อหาถูกหักล้างเมื่อคุณใช้ text-align: center;

— Luke

3

margin: 0 -10px;

ดีกว่า

margin: -10px;

ต่อมาจะดูดเนื้อหาเข้าไปในแนวตั้ง

— honkskillet
แหล่งที่มา

2

ผู้ปกครองของคุณมีความกว้าง 120px นั่นคือความกว้าง 100 + ช่องว่าง 20 ด้านในแต่ละด้านดังนั้นคุณต้องทำให้บรรทัดกว้าง 120px นี่คือรหัส ครั้งต่อไปโปรดทราบว่าช่องว่างภายในจะเพิ่มความกว้างขององค์ประกอบ

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

— easwee
แหล่งที่มา

1

ด้วยความกว้างที่กำหนดเป็นเรื่องง่าย ปัญหาคือเมื่อคุณไม่ทราบความกว้าง

— Guilherme Ferreira

@GuilhermeFerreira ใช้ในwidth: auto; jsfiddle.net/ToolmakerSteve/7p85dsrq/3 ขออภัยการแก้ปัญหานี้ยังคงต้องใช้ความรู้ที่กำหนดโดยผู้ปกครอง hrpadding

— ToolmakerSteve

1

ปัญหาอาจมาจากรุ่นกล่องที่คุณใช้ คุณใช้ IE หรือไม่?

เมื่อ IE อยู่ในโหมด quirks widthคือความกว้างภายนอกของกล่องซึ่งหมายความว่าช่องว่างภายในจะอยู่ด้านใน ดังนั้นพื้นที่ทั้งหมดที่เหลืออยู่ภายในกล่อง100px - 2 * 10px = 80pxซึ่งในกรณีนี้ความกว้าง 100px ของคุณ<hr>จะดูไม่ถูกต้อง

หากคุณอยู่ในโหมดมาตรฐานwidthคือความกว้างด้านในของกล่องของคุณและช่องว่างภายในจะถูกเพิ่มออกไปด้านนอก ดังนั้นความกว้างทั้งหมดของกล่องจะ100px + 2 * 10px = 120pxออกตรง 100px <hr>ภายในกล่องสำหรับคุณ

ในการแก้ปัญหาให้ปรับค่า CSS ของคุณสำหรับ IE (ตรวจสอบใน Firefox เพื่อดูว่าใช้ได้หรือไม่) หรือที่ดีกว่านั้นให้ตั้งค่าประเภทเอกสารเพื่อให้เบราว์เซอร์เข้าสู่โหมดเข้มงวดโดยที่ IE จะทำตามรูปแบบกล่องมาตรฐาน

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

— Martin Algesten
แหล่งที่มา

1

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

margin-top: -100px;
margin-bottom: -100px;

มูลค่าที่แท้จริงดูเหมือนจะไม่สำคัญมากนัก ยังไม่ได้ลองใช้สำหรับการพายในแนวนอน

— Marnix.hoh
แหล่งที่มา

0

แก้ไขง่าย .. เพิ่มใน div หลัก:

ขนาดกล่อง: border-box;

— Jaclyn U
แหล่งที่มา

0

นี่เป็นอีกวิธีหนึ่งที่จะทำได้

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

นี่คือตัวอย่างบางส่วนใน repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
แหล่งที่มา