Khoảng trắng xung quanh hình ảnh

Question

Tôi có một số văn bản xung quanh một hình ảnh đã được thả nổi bên trái. Nhưng văn bản đi thẳng lên trên đường viền của hình ảnh. Làm thế nào để tôi tạo ra một khoảng trắng xung quanh nó?

Tại thời điểm này tôi đã có trong CSS:

.image { 
    float:left 
} 

và quan điểm:

<% if article.newspic.exists? %> 
     <div class ="image"> 
     <%= newspic_thumbnail_tag(article) %> 
     </div> 
    <% end %> 

    <%= simple_format(article.body) %><br> 

Nếu tôi thêm một margin-right đến hình ảnh, sau đó văn bản sẽ chỉ đơn giản là bắt đầu từ dưới bức hình.

Answer 1

.image { 
    padding-right: 10px 
} 

Answer 2

Thêm lề phải vào hình ảnh.

.imageclass 
{ 
    margin-right: 3px; 
} 

Answer 3

Thêm một trong hai:

• margin-left hoặc padding-left đến các văn bản, hoặc
• margin-right hoặc padding-quyền hình ảnh

Thật khó để nói điều gì sẽ tốt hơn nếu không nhìn thấy CSS/XHTML của bạn.

Answer 4

Thêm lề phải trong trường hợp này nhưng tôi đã gặp vấn đề với lề và nổi trước đây, đặc biệt khi xử lý lề âm nhưng bạn cũng có vấn đề với biên độ thu hẹp. Điều đó có thể hoặc không thể là hành vi bạn muốn. Thường thì tôi đã kết thúc bảo vệ kèm theo nội dung nổi trong một div và sử dụng padding thay vì kết quả có xu hướng trực quan hơn.

Ngoài ra IE7 không xử lý lề tiêu cực lớn hơn chiều rộng nội dung nên bạn phải sử dụng các phần tử kèm theo trong trường hợp đó. Đây là example of that technique.

Answer 5

Nếu thêm lề phải vào hình ảnh làm cho văn bản chỉ hiển thị bên dưới, thì bạn cần phải tăng kích thước của vùng chứa chính.

Nếu tổng chiều rộng của 2 thành phần lớn hơn kích thước của vùng chứa chính, một trong số chúng đi đến dòng tiếp theo.

ví dụ Mã trên

<div class="parentDiv"> 
    <div class="image"> 
     **image here (assume it's 100px wide)** 
    </div> 
    <div class="otherText"> 
     **text here** 
    </div> 
</div> 

này sẽ không làm việc vì kích thước hình ảnh + hình ảnh lề + chiều rộng otherText> chiều rộng parentDiv. Nó sẽ gây ra văn bản để đi vào dòng tiếp theo:

.parentDiv 
{ 
    width: 500px; 
} 

.image 
{ 
    float: left; 
    margin-right: 3px; 
} 

.otherText 
{ 
    float: left; 
    width: 400px; 
} 

này sẽ làm việc:

.parentDiv 
{ 
    width: 510px; 
} 

.image 
{ 
    float: left; 
    margin-right: 3px; 
} 

.otherText 
{ 
    float: left; 
    width: 400px; 
} 

Answer 6

Chỉ cần chạy vào ngày hôm qua này. Nếu bạn đang lập kế hoạch sử dụng đường viền xung quanh hình ảnh, hãy đảm bảo sử dụng các thuộc tính lề thay vì đệm, hoặc bạn sẽ cuộn lên với khoảng trống giữa đường viền của hình ảnh và chính hình ảnh đó.