В следующем HTML яМне бы хотелось, чтобы рамка вокруг изображения была аккуратной - чтобы она не растягивалась и занимала всю доступную ширину в родительском контейнере. Я знаю, что есть несколько способов сделать это (включая ужасные вещи, такие как ручная установка его ширины на определенное количество пикселей), но каковаправо путь?

Редактировать: Один ответ предлагает мне выключитьдисплей: блок» - но это заставляет рендеринг выглядеть неправильно в каждом браузереЯ проверил это. Есть ли способ получить красивый рендеринг с "дисплей: блок» выкл?

Редактировать: Если я добавлюплыть налево" на фоторамку и "ясно: как» к тегу P это выглядит великолепно. Но я неЯ не хочу, чтобы эти кадры плавали влево. Есть ли более прямой способ сделать что угоднопоплавок» делается?

.pictureframe {
  display: block;
  margin: 5px;
  padding: 5px;
  border: solid brown 2px;
  background-color: #ffeecc;
}
#foo {
  border: solid blue 2px;
  float: left;
}
img {
  display: block;
}

  <span class="pictureframe">
       <img alt="" src="http://stackoverflow.com/favicon.ico">
  </span>
  <p>
    Why is the beige rectangle so wide?
  </p>