Loại bỏ khoảng trắng giữa các phần tử HTML khi sử dụng ngắt dòng

Tôi có một trang với một hàng khoảng 10 imgs. Để HTML dễ đọc, tôi muốn đặt dấu ngắt dòng ở giữa mỗi imgthẻ, nhưng làm như vậy sẽ tạo ra khoảng trắng giữa các hình ảnh, điều mà tôi không muốn. Tôi có thể làm gì khác ngoài việc ngắt ở giữa các thẻ thay vì giữa chúng không?

Chỉnh sửa: Đây là ảnh chụp màn hình của những gì tôi có cho đến nay. Tôi muốn các hình ảnh gáy sách hiển thị theo kiểu kết hợp ngẫu nhiên, sử dụng PHP. Đây là lý do tại sao tôi cần imgcác thẻ riêng biệt .

Bạn có thể sử dụng CSS. Cài đặt hiển thị: khối hoặc nổi: bên trái trên hình ảnh sẽ cho phép bạn xác định khoảng cách của riêng mình và định dạng HTML theo cách bạn muốn nhưng sẽ ảnh hưởng đến bố cục theo những cách có thể hoặc không phù hợp.

Nếu không, bạn đang xử lý nội dung nội tuyến nên định dạng HTML rất quan trọng - vì hình ảnh sẽ hoạt động hiệu quả giống như lời nói.

Xin lỗi nếu điều này là cũ nhưng tôi chỉ tìm thấy một giải pháp.

Hãy thử đặt font-sizethành 0. Vì vậy, khoảng trắng ở giữa các hình ảnh sẽ có chiều rộng bằng 0 và hình ảnh sẽ không bị ảnh hưởng.

Không biết liệu điều này có hoạt động trên tất cả các trình duyệt hay không, nhưng tôi đã thử với Chromium và một số <li>phần tử với display: inline-block;.

Bạn có thể sử dụng bình luận.

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

Tuy nhiên, tôi lo lắng về ngữ nghĩa của việc có một loạt các hình ảnh cạnh nhau.

Bạn có hai tùy chọn mà không cần thực hiện những thứ gần đúng với CSS. Tùy chọn đầu tiên là sử dụng javascript để xóa các phần tử con chỉ có khoảng trắng khỏi các thẻ. Tuy nhiên, một lựa chọn tốt hơn là sử dụng thực tế là khoảng trắng có thể tồn tại bên trong các thẻ mà nó không có ý nghĩa. Như vậy:

<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 có thể dễ dàng khắc phục sự cố cũ này:

.image-wrapper {
  display: flex;
}

Thông tin thêm về flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Sau quá nhiều nghiên cứu, thử và sai, tôi đã tìm thấy một cách có vẻ hoạt động tốt và không yêu cầu phải đặt lại kích thước phông chữ theo cách thủ công trên các phần tử con, cho phép tôi có kích thước phông chữ em chuẩn trên toàn bộ tài liệu .

Trong Firefox, điều này khá đơn giản, chỉ cần thiết lập word-spacing: -1emtrên phần tử cha. Vì một số lý do, Chrome bỏ qua điều này (và theo như tôi đã kiểm tra, nó bỏ qua khoảng cách từ bất kể giá trị là bao nhiêu). Vì vậy, bên cạnh điều này, tôi thêm letter-spacing: -.31emcho phụ huynh và letter-spacing: normalcho trẻ em. Phần nhỏ này là kích thước của không gian CHỈ NẾU kích thước của bạn được tiêu chuẩn hóa . Ngược lại, Firefox bỏ qua các giá trị âm cho khoảng cách giữa các chữ cái, vì vậy nó sẽ không thêm nó vào khoảng cách từ.

Tôi đã thử nghiệm điều này trên Firefox 13 (win / ubuntu, 14 trên android), Google Chrome 20 (win / ubuntu), Trình duyệt Android trên ICS 4.0.4 và IE 9. Và tôi muốn nói rằng điều này cũng có thể hoạt động trên Safari, nhưng tôi không thực sự biết ...

Đây là bản demo http://jsbin.com/acucam

Tôi đã quá muộn (tôi vừa hỏi một câu hỏi và tìm thấy mỏng trong phần liên quan) nhưng tôi nghĩ rằng display: table-cell; là một giải pháp tốt hơn

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

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

vấn đề duy nhất là nó sẽ không hoạt động trên IE 7 và các phiên bản trước đó nhưng có thể khắc phục được nếu bị hack

Sử dụng CSS stylesheet để giải quyết vấn đề này như đoạn mã sau.

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

văn bản thay thế http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJnNGPLy08CCapture.PnoPLy08CCapn

Thử nghiệm trên Firefox 3.5 Final!

Tái bút. html của bạn sẽ như thế này.

<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>

Tôi có thể làm gì khác ngoài việc ngắt ở giữa các thẻ thay vì giữa chúng không?

Không hẳn. Vì <img>s là các phần tử nội dòng, các khoảng trắng giữa các phần tử này được trình kết xuất HTML coi là các khoảng trắng thực sự trong văn bản - các khoảng trắng thừa (và các dấu ngắt dòng) sẽ bị cắt bớt nhưng các khoảng trắng đơn sẽ được chèn vào dữ liệu ký tự của phần tử văn bản.

Định vị các <img>thẻ hoàn toàn có thể ngăn chặn điều này nhưng tôi khuyên bạn không nên điều này vì điều này có nghĩa là định vị từng hình ảnh theo cách thủ công theo một số đo pixel có thể tốn nhiều công sức.

Một giải pháp khác là sử dụng các dấu ngắt dòng độc đáo ở những vị trí của khoảng trắng. Điều này tương tự như các câu trả lời đầu tiên và là một cách thay thế để sắp xếp các phần tử. Nó cũng là một kỹ thuật tối ưu hóa siêu cạnh vì nó thay thế các khoảng trắng trong đánh dấu của bạn bằng các dấu xuống dòng.

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

Lưu ý rằng không có khoảng trắng nào trong bất kỳ mã đó. Những nơi mà dấu cách thường được sử dụng trong HTML được thay thế bằng ký tự xuống dòng. Nó ít dài dòng hơn cả việc sử dụng nhận xét và sử dụng khoảng trắng như Paul de Vrieze khuyến nghị.

Tín dụng cho tech.co cho cách tiếp cận này.

khoảng trắng: ban đầu; Làm việc cho tôi.

Khoảng trắng giữa các phần tử chỉ được đặt ở đó bởi trình soạn thảo HTML cho mục đích định dạng trực quan. Bạn có thể sử dụng jQuery để loại bỏ khoảng trắng:

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

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

});

Thao tác này tách các phần tử con, xóa mọi khoảng trắng còn lại trước khi thêm lại các phần tử con.

Không giống như các câu trả lời khác cho câu hỏi này, sử dụng phương pháp này đảm bảo rằng css displayvà font-sizegiá trị kế thừa được duy trì. Cũng không cần sử dụng floatvà những thứ rườm rà clearsau đó là bắt buộc. Tất nhiên, bạn sẽ cần phải sử dụng jQuery.

Cá nhân tôi thích câu trả lời được chấp nhận nói rằng không có cách chính xác để làm điều này, không ngoại trừ việc sử dụng một số thủ thuật.

Đối với tôi, đó là một vấn đề khó chịu đôi khi có thể khiến bạn lãng phí cả giờ đồng hồ để tự hỏi tại sao một hàng hộp kiểm chẳng hạn như không phải tất cả đều được căn chỉnh chính xác .. Do đó, tôi phải nhanh chóng google và tự kiểm tra xem có quy tắc css không mà tôi không nhớ ... nhưng có vẻ như không :(

Đối với câu trả lời hay nhất tiếp theo, về việc sử dụng kích thước phông chữ ... đối với tôi đây là một cách hack khó chịu sẽ khiến bạn sau này tự hỏi tại sao văn bản của bạn không hiển thị.

Tôi thường phát triển rất nhiều với PHP và trong trường hợp tôi đang tạo một lưới các hộp kiểm, nội dung do PHP tạo ra sẽ loại bỏ vấn đề này vì nó không chèn bất kỳ khoảng cách / ngắt nào.

Đơn giản, tôi khuyên bạn nên xử lý tất cả các hình ảnh nằm trên một dòng cùng nhau hoặc sử dụng tập lệnh phía máy chủ để tạo nội dung / hình ảnh.

Thay vì sử dụng để loại bỏ CR / LF giữa các phần tử, tôi sử dụng hướng dẫn xử lý SGML vì các trình thu nhỏ thường loại bỏ các chú thích, nhưng không phải là XML PI. Khi PHP PI được xử lý bởi PHP, nó có thêm lợi ích là xóa hoàn toàn PI cùng với CR / LF ở giữa, do đó tiết kiệm ít nhất 8 byte. Bạn có thể sử dụng bất kỳ tên lệnh hợp lệ tùy ý nào chẳng hạn như và lưu hai byte trong X (HT) ML.

Lấy cảm hứng từ câu trả lời của Quentin , bạn cũng có thể đặt dấu đóng> bên cạnh phần bắt đầu của thẻ tiếp theo.

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

Nói theo ngữ nghĩa, không phải tốt nhất là sử dụng một danh sách có thứ tự hoặc không có thứ tự và sau đó tạo kiểu cho nó một cách thích hợp bằng cách sử dụng 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>

Sử dụng CSS, bạn sẽ có thể tạo kiểu này theo bất kỳ cách nào bạn muốn và loại bỏ khoảng trắng giữa các cuốn sách.