Проблема CSS-границы - у меня есть граница вокруг изображения. Я также использую поля на изображении. Граница не плотно прилегает к изображению? - PullRequest
Новая
       34

Проблема CSS-границы - у меня есть граница вокруг изображения. Я также использую поля на изображении. Граница не плотно прилегает к изображению?

1 голос
/ 22 июня 2011

Быстрый вопрос. Пожалуйста, смотрите пример на http://www.urbanelementz.ca/ ...

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

Вот URL к изображению, о котором я говорю:

http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png

Я сделал пунктирную границу более толстой и белой, чтобы вы могли видеть, о чем я говорю. У меня есть верхнее поле и правое поле на изображении, поэтому текст не соответствует изображению. Как сделать так, чтобы граница подходила прямо к изображению, а не к изображению + установленные поля? Без использования дополнения, если это возможно. Я хочу, чтобы мои поля были установлены. Есть ли способ это исправить?

Большое спасибо!

Ответы [ 8 ]

3 голосов
/ 22 июня 2011 
img#colorfx1 {
    border-collapse: collapse;
    border-color: #FFFFFF;
    border-style: dotted;
    border-width: 3px;
    float: left;
    padding: 2px 5px 0 1px;
    vertical-align: top;
}

Измените padding на margin, и это выглядит хорошо.

Я думаю, вы намеревались написать margin в первую очередь.

3 голосов
/ 22 июня 2011

Добавить / редактировать CSS с помощью: 

img#colorfx1 {
  padding: 0px;
  margin-right: 10px;
}
2 голосов
/ 22 июня 2011

Я вижу, что этот стиль применяется: 

img#colorfx1 {
    border-collapse: collapse;
    border-color: #FFFFFF;
    border-style: dotted;
    border-width: 3px;
    float: left;
    padding: 2px 5px 0 1px;
    vertical-align: top;
}

Снятие обивки исправило её для меня ...

1 голос
/ 22 июня 2011

Избавьтесь от отступов на изображении.Установите отступ в 0: 

img#colorfx1 { padding: 0; }
0 голосов
/ 22 июня 2011

У меня есть мета-ответ: да, заполнение было вашей проблемой. Вы можете избежать вопросов такого рода в будущем, если начнете использовать a) команду контекстного меню Chrome «Inspect Element» или b) Firebug для Firefox, что более или менее одно и то же. Посмотрите на вычисляемый стиль элемента, и вы сможете точно узнать, какое свойство заставляет ваш элемент вести себя так, как он.

0 голосов
/ 22 июня 2011

вы можете использовать пандинг, такой как: 

<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">

это будет выглядеть так же, как вы хотите, вот некоторые вещи также: ссылка

regards ...

0 голосов
/ 22 июня 2011

Я думаю, если вы установите свой CSS как это 

img#colorfx1 {
  padding: 0px;
  margin: 0px 5px 0px 5px;
  border: #FFFFFF dotted 3px;
  float: left;
}
0 голосов
/ 22 июня 2011

Из того, что я вижу, для этого изображения не установлено поле.У вас все же есть набор отступов.После того, как вы удалите отступ и используете вместо него маржу, все будет хорошо.

...