Пробел вокруг изображения

Question

У меня есть текст вокруг изображения, которое было перемещено слева. Но текст идет прямо против границы изображения. Как мне сделать некоторое свободное пространство вокруг него?

На данный момент я получил в CSS:

.image { 
    float:left 
} 

и вид:

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

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

Если добавить margin-right к изображению, то текст будет просто начать из-под изображение.

Answer 1

.image { 
    padding-right: 10px 
} 

Answer 2

Добавить поле прав в фотографию.

.imageclass 
{ 
    margin-right: 3px; 
} 

Answer 3

Добавить либо:

• маржа налево или набивка налево к тексту или
• Маржа правом или набивка правом на изображение

Это трудно скажите, что было бы лучше, не увидев ваш CSS/XHTML.

Answer 4

Добавление маржинального права должно работать в этом случае, но раньше у меня были проблемы с полями и поплавками, особенно при работе с отрицательными полями, но у вас также есть проблемы с коллапсирующими полями. Это может быть или не быть поведением, которое вы хотите. Часто я защищал плавающий контент в div и вместо этого добавлял пробел, поскольку результаты, как правило, более интуитивно понятны.

Также IE7 не обрабатывает отрицательные поля, превышающие ширину содержимого, поэтому в этом случае вы должны использовать охватывающие элементы. Вот example of that technique.

Answer 5

Если добавление поля справа к изображению делает текст просто отображаемым снизу, тогда вам нужно увеличить размер родительского контейнера.

Если общая ширина двух компонентов больше размера родительского контейнера, одна из них переходит к следующей строке.

примеры кода на

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

это не будет работать, так как размер изображения + изображение + маржа otherText ширина> parentDiv ширины. Это приведет текст, чтобы перейти к следующей строке:

.parentDiv 
{ 
    width: 500px; 
} 

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

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

Это будет работать:

.parentDiv 
{ 
    width: 510px; 
} 

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

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

Answer 6

Просто столкнулся с этим вчера. Если вы планируете использовать рамку вокруг изображения, обязательно используйте свойства поля вместо заполнения, или вы получите пробелы между границей изображения и самим изображением.