การลบช่องว่างระหว่างองค์ประกอบ HTML เมื่อใช้ตัวแบ่งบรรทัด

ฉันมีหน้าที่มีแถวประมาณ 10 imgวินาที เพื่อให้อ่านได้ง่ายของ HTML ฉันต้องการใส่เส้นแบ่งระหว่างแต่ละimgแท็ก แต่การทำเช่นนั้นจะทำให้เกิดช่องว่างระหว่างรูปภาพซึ่งฉันไม่ต้องการ มีอะไรที่ฉันสามารถทำได้นอกเหนือจากทำลายตรงกลางแท็กแทนที่จะทำระหว่างแท็ก

แก้ไข: นี่คือภาพหน้าจอของสิ่งที่ฉันมีจนถึงตอนนี้ ฉันต้องการให้ภาพกระดูกสันหลังของหนังสือแสดงในชุดค่าผสมแบบสุ่มโดยใช้ PHP นี่คือเหตุผลที่ฉันต้องการimgแท็กแยกต่างหาก

คุณสามารถใช้ CSS การตั้งค่า display: block หรือ float: ทิ้งไว้บนรูปภาพจะช่วยให้คุณกำหนดระยะห่างของคุณเองและจัดรูปแบบ HTML ได้ตามที่คุณต้องการ แต่จะส่งผลต่อเลย์เอาต์ในรูปแบบที่อาจเหมาะสมหรือไม่ก็ได้

มิฉะนั้นคุณกำลังจัดการกับเนื้อหาแบบอินไลน์ดังนั้นการจัดรูปแบบ HTML จึงมีความสำคัญเนื่องจากรูปภาพจะทำหน้าที่เหมือนคำได้อย่างมีประสิทธิภาพ

ขออภัยหากสิ่งนี้เก่า แต่ฉันเพิ่งพบวิธีแก้ปัญหา

ลองตั้งค่าเป็นfont-size0 ดังนั้นช่องว่างสีขาวระหว่างรูปภาพจะมีความกว้างเป็น 0 และรูปภาพจะไม่ได้รับผลกระทบ

ไม่ทราบว่างานนี้ในเบราว์เซอร์ทั้งหมด แต่ฉันพยายามมันด้วยโครเมี่ยมและบางองค์ประกอบที่มี<li>display: inline-block;

คุณสามารถใช้ความคิดเห็น

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

ฉันกังวลเกี่ยวกับความหมายของการมีชุดของภาพเคียงข้างกัน

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

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Flexbox สามารถแก้ไขปัญหาเก่านี้ได้อย่างง่ายดาย:

.image-wrapper {
  display: flex;
}

ข้อมูลเพิ่มเติมเกี่ยวกับ flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

ใน Firefox นี่ค่อนข้างง่ายเพียงตั้งค่าword-spacing: -1emในองค์ประกอบหลัก ด้วยเหตุผลบางประการ Chrome จึงเพิกเฉยต่อสิ่งนี้ (และเท่าที่ฉันทดสอบแล้ว Chrome จะไม่สนใจระยะห่างของคำโดยไม่คำนึงถึงค่า) นอกจากนี้ฉันletter-spacing: -.31emยังเพิ่มให้ผู้ปกครองและletter-spacing: normalเด็ก ๆ ส่วนของ em นี่คือขนาดของพื้นที่เท่านั้นถ้าขนาด em ของคุณเป็นมาตรฐาน ในทางกลับกัน Firefox จะละเว้นค่าลบสำหรับการเว้นวรรคตัวอักษรดังนั้นจะไม่เพิ่มลงในระยะห่างของคำ

ฉันทดสอบสิ่งนี้บน Firefox 13 (win / ubuntu, 14 บน Android), Google Chrome 20 (win / ubuntu), เบราว์เซอร์ Android บน ICS 4.0.4 และ IE 9 และฉันอยากจะบอกว่าสิ่งนี้อาจใช้ได้กับ Safari ด้วย แต่ฉันไม่รู้จริงๆ ...

นี่คือตัวอย่างhttp://jsbin.com/acucam

ฉันสายเกินไป (ฉันเพิ่งถามคำถามและพบว่าบางในส่วนที่เกี่ยวข้อง) แต่ฉันคิดว่าdisplay: table-cell; เป็นทางออกที่ดีกว่า

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

ปัญหาเดียวคือมันจะไม่ทำงานบน IE 7 และเวอร์ชันก่อนหน้านี้ แต่แก้ไขได้ด้วยการแฮ็ก

ใช้สไตล์ชีต CSS เพื่อแก้ปัญหานี้เช่นโค้ดต่อไปนี้

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

ข้อความแสดงแทน http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdCapture.Pyd2y08

การทดสอบบน Firefox 3.5 รอบชิงชนะเลิศ!

ปล. html ของคุณควรเป็นแบบนี้

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

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

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

การวางตำแหน่ง<img>แท็กสามารถป้องกันสิ่งนี้ได้อย่างแน่นอน แต่ฉันไม่แนะนำให้ทำเช่นนี้เนื่องจากจะหมายถึงการวางตำแหน่งภาพแต่ละภาพด้วยตนเองเพื่อวัดพิกเซลซึ่งอาจใช้งานได้มาก

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

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

โปรดทราบว่าไม่มีช่องว่างใด ๆ ในรหัสนั้น สถานที่ที่ปกติใช้ช่องว่างใน HTML จะถูกแทนที่ด้วยการส่งคืนค่าขนส่ง มีรายละเอียดน้อยกว่าทั้งการใช้ความคิดเห็นและการใช้ช่องว่างเช่น Paul de Vrieze แนะนำ

ให้เครดิตกับ tech.co สำหรับแนวทางนี้

ช่องว่างสีขาว: เริ่มต้น; ใช้ได้ผลสำหรับฉัน

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

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

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

ไม่เหมือนกับคำตอบอื่น ๆ สำหรับคำถามนี้การใช้วิธีนี้จะช่วยให้มั่นใจได้ว่า css displayและfont-sizeค่าที่สืบทอดมาจะยังคงอยู่ นอกจากนี้ยังไม่จำเป็นต้องใช้floatและยุ่งยากclearที่จำเป็น แน่นอนคุณจะต้องใช้ jQuery

โดยส่วนตัวแล้วฉันชอบคำตอบที่ได้รับการยอมรับซึ่งระบุว่าไม่มีวิธีที่แน่นอนในการทำเช่นนี้ไม่ใช่ด้วยการใช้กลอุบายในรูปแบบบางอย่าง

สำหรับฉันแล้วมันเป็นปัญหาที่น่ารำคาญในบางครั้งอาจทำให้คุณเสียเวลาไปหนึ่งชั่วโมงสงสัยว่าทำไมแถวของช่องทำเครื่องหมายไม่ได้จัดเรียงอย่างถูกต้องทั้งหมด .. ดังนั้นฉันต้องมี google ด่วนและตรวจสอบตัวเองว่ามีกฎ css หรือไม่ ที่ฉันจำไม่ได้ ... แต่ดูเหมือนไม่ :(

สำหรับคำตอบที่ดีที่สุดต่อไปของการใช้ขนาดตัวอักษร ... สำหรับฉันนี่คือแฮ็คที่น่ารังเกียจที่จะกัดคุณในภายหลังเมื่อสงสัยว่าทำไมข้อความของคุณไม่แสดง

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

เพียงแค่ฉันขอแนะนำให้จัดการกับรูปภาพทั้งหมดที่อยู่ในบรรทัดเดียวด้วยกันหรือใช้สคริปต์ฝั่งเซิร์ฟเวอร์เพื่อสร้างเนื้อหา / รูปภาพ

แทนที่จะใช้เพื่อลบ CR / LF ระหว่างองค์ประกอบฉันใช้คำสั่งการประมวลผล SGML เนื่องจากตัวย่อมักจะลบความคิดเห็น แต่ไม่ใช่ XML PI เมื่อ PHP PI ประมวลผลโดย PHP จะมีประโยชน์เพิ่มเติมในการลบ PI อย่างสมบูรณ์พร้อมกับ CR / LF ในระหว่างนั้นซึ่งจะช่วยประหยัดอย่างน้อย 8 ไบต์ คุณสามารถใช้ชื่อคำสั่งที่ถูกต้องตามอำเภอใจเช่นและบันทึกสองไบต์ใน X (HT) ML

ด้วยแรงบันดาลใจจากคำตอบของ Quentinคุณยังสามารถวางคำปิด> ถัดจากจุดเริ่มต้นของแท็กถัดไป

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

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

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

เมื่อใช้ CSS คุณจะสามารถจัดรูปแบบตามที่คุณต้องการและลบช่องว่างระหว่างหนังสือได้