ตำแหน่ง: ญาติออกจากพื้นที่ว่าง


88

รหัสอยู่ที่นี่: http://lasers.org.ru/vs/example.html

จะลบพื้นที่ว่างในบล็อกหลัก (#page) ได้อย่างไร?


คุณหมายถึงช่องว่างด้านล่างหรือเพื่อให้สิ่งทั้งหมดอยู่ตรงกลางในแนวตั้ง?
alex

คุณหมายถึงช่องว่างระหว่างข้อความใน #page div และเส้นขอบหรือไม่? ไม่งั้นฉันไม่แน่ใจว่าคุณกำลังพูดถึงพื้นที่ใด
Jeremy Battle

@ Jeremy รบฉันไม่สามารถคิดออกอย่างใดอย่างหนึ่ง แต่Guffa ดูเหมือนว่าจะมี
alex

มีใครบ้างที่ไม่เห็นปัญหานี้?
Myles Grey

โปรดดูคำตอบที่ทำเครื่องหมายที่ [ stackoverflow.com/questions/13722095/… [1]: stackoverflow.com/questions/13722095/…
Sohel Pathan

คำตอบ:


36

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

ฉันเล่นกับเค้าโครงเล็กน้อยและฉันขอแนะนำให้คุณเปลี่ยนกฎสามข้อนี้เป็น:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

27
"และคุณไม่สามารถกำจัดสิ่งนั้นได้" - คุณสามารถ. เพียงใช้ระยะขอบลบเช่นในคำตอบของ plang
Michał K

5
@ MichałK: ไม่นั่นหมายความว่าคุณทับพื้นที่ว่างกับองค์ประกอบอื่นเท่านั้นไม่ใช่ว่าคุณกำจัดพื้นที่ว่างออกไป คุณสามารถใช้ระยะขอบเชิงลบเพื่อซ้อนพื้นที่ว่างจากการวางตำแหน่งสัมพัทธ์กับขนาดขององค์ประกอบ
Guffa

@ MichałK: การลดคะแนนคำตอบนี้และคำตอบอื่น ๆ ที่ไม่เกี่ยวข้องไม่ได้ช่วยอะไรคุณยังไม่สามารถกำจัดช่องว่างที่เกิดจากการวางตำแหน่งสัมพัทธ์ได้
Guffa

1
@ MichałK: ในขณะที่คุณสามารถครอบคลุมพื้นที่ได้เท่านั้นและไม่สามารถกำจัดมันได้คุณต้องมีองค์ประกอบอื่น ๆ ที่ใหญ่เท่ากับพื้นที่ว่างอย่างน้อยที่สุดเพื่อปกปิดมัน ตัวอย่างเช่นหากคุณมีพื้นที่ว่างจากองค์ประกอบที่มีความสูง 200px และมีเพียงองค์ประกอบที่มีความสูง 100px เพื่อปกปิดหลุมคุณจะยังคงมีพื้นที่ว่างเหลือ 100px ของหลุม
Guffa

1
ทำไมต้องโหวตลด? หากคุณไม่อธิบายสิ่งที่คุณคิดว่าผิดมันก็ไม่สามารถปรับปรุงคำตอบได้
Guffa

183

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

สิ่งที่ต้องการ:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

คล้ายกัน (ถ้าไม่เหมือนกัน) กับโซลูชันที่ฉันเห็นตอนนี้จากสีเขียว


30
คำตอบที่เรียบง่ายและยอดเยี่ยม และพิสูจน์ได้อย่างสมบูรณ์แบบว่า HTML / CSS เป็นเรื่องประหลาด
Synesso

1
@plang ดูเหมือนจะไม่ทำงาน ดูjsfiddle.net/u7sq8rL7/1 พื้นหลังสีเขียวขยายเกินองค์ประกอบสุดท้าย
Pacerier

1
@Pacerier อย่าใช้ margin-bottom เห็นได้ชัดว่ามันใช้ไม่ได้ (ลองคิดดูสิ); คุณต้องการขอบด้านบน
William

2
นี้ทำงานได้อย่างสมบูรณ์ และใช่คุณใช้margin-bottomกับเลขลบเพราะคุณต้องการกำจัดช่องว่างด้านล่าง
phocks

ดีถ้าเค้าโครงของคุณมีสุขภาพที่ดีสิ่งนี้จะใช้ได้ดี
Vitaliy Terziev


2

ลองใช้กฎนี้:

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

ฉันเปลี่ยนตำแหน่งเป็นค่าสัมบูรณ์สิ่งนี้ช่วยให้คุณใช้bottom: 0คุณสมบัติได้


1
#page {
  padding-bottom: 0;
}

ไม่มีช่องว่างด้านล่าง


นี่เป็นคำตอบที่ถูกต้อง แต่ฉันจะบอกว่าคุณน่าจะดีกว่ากับการเพิ่มช่องว่างเนื่องจากอ่านง่ายกว่าและมีมาตรฐานมากกว่าบนเว็บที่จะมีช่องว่างภายใน
Jeremy Battle

@ เจเรมีแบทเทิลแน่นอนช่องว่างภายในดูดีขึ้นมาก
alex

@Kir คุณสามารถปรับเปลี่ยนรูปแบบปัจจุบันของคุณเป็น padding: 8px 16px 0px; เพื่อหลีกเลี่ยงการมีบรรทัดเพิ่มเติมใน CSS ของคุณ
Jeremy Battle

ฉันเชื่อว่าเป็นพื้นที่ 300px ด้านล่างคอนเทนเนอร์เนื้อหาที่เป็นปัญหาไม่ใช่พื้นที่ภายในคอนเทนเนอร์ ...
Guffa

สถานการณ์จะสร้างกล่องที่ไม่ระบุตัวตนภายใน div (#page) และตามข้อกำหนด CSS ไม่มีวิธีอื่นใดในการควบคุมกล่องที่ไม่ระบุตัวตนโดยตรงและกล่องที่ไม่ระบุชื่อนี้จะสืบทอดคุณสมบัติจากพาเรนต์ (ในกรณีนี้คือ #page) ดังนั้นดีกว่าที่จะเปลี่ยน div พาเรนต์โดยการเปลี่ยนคุณสมบัติเช่น @alex กล่าว หากข้างต้นไม่เป็นไปตามเกณฑ์การใช้ระยะขอบติดลบก็เป็นทางออกในสถานการณ์นี้เช่นกัน
kta

1

ฉันมีปัญหาที่คล้ายกัน วิธีที่ง่ายที่สุดคือการเปลี่ยนบนสำหรับmargin-top#page


margin-top ที่มีค่าติดลบแทนที่จะเป็น top + margin-bottom เป็นวิธีที่จะไป
xtian

1

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

.maincontent {
    height: 675px;
}

1

คำตอบของฉันช้า แต่อาจช่วยคนอื่น ๆ ที่มีปัญหาคล้ายกันกับฉัน

ผมมี<div>กับposition: relative;ที่ทุกองค์ประกอบของเด็กที่มีposition: absolute;สไตล์ สิ่งนี้ทำให้พื้นที่สีขาวประมาณ20pxปรากฏบนหน้าเว็บของฉัน

เพื่อหลีกเลี่ยงสิ่งนี้ฉันได้เพิ่มmargin-top: -20px;องค์ประกอบพี่น้องถัดไปหลังจาก<div>ด้วยposition: relative;.

หากคุณมีองค์ประกอบพี่น้องมาก่อนคุณสามารถใช้ไฟล์ margin-bottom: -20px;

section {
  height: 200px;
}
<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


0

ฉันสามารถกำจัดช่องว่างโดยใช้กรอบต่อไปนี้:

กรอบ HTML-CSS

และนี่คือมาร์กอัป

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

0

คำถามนี้ดูเหมือนจะตอบได้ดี - อย่างไรก็ตามคำตอบทั้งหมดข้างต้นมีผลข้างเคียงที่ไม่ดีในเค้าโครงของฉัน นี่คือสิ่งที่ได้ผลสำหรับฉันจริงๆ:

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}
<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>


0

ทางออกที่ดีที่สุดหากคุณไม่ต้องการเว้นช่องว่างด้านล่าง (ญาติ)

คือการใช้ระยะขอบบนและตำแหน่ง: เหนียว

#page {
     margin-top: -280px;
     position: sticky;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.