W poniższym kodzie HTML chciałbym, aby ramka wokół obrazu była wygodna - nie rozciągała się i zajmowała całą dostępną szerokość w kontenerze nadrzędnym. Wiem, że jest na to kilka sposobów (w tym straszne rzeczy, takie jak ręczne ustawianie szerokości na określoną liczbę pikseli), ale czym jestdobrze sposób?

Edytować: Jedna odpowiedź sugeruje, że wyłączam „display: block” - ale powoduje to, że renderowanie wygląda zniekształcone w każdej przeglądarce, w której go przetestowałem. Czy istnieje sposób, aby uzyskać ładnie wyglądający rendering z wyłączonym „display: block”?

Edytować: Jeśli dodam „float: left” do ramki obrazu i „clear: both” do tagu P, wygląda świetnie. Ale nie zawsze chcę, żeby te ramki płynęły w lewo. Czy istnieje bardziej bezpośredni sposób na osiągnięcie tego, co robi „float”?

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

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