Witam,
mam taki kod: http://jsfiddle.net/N8RjF/1/

Pytanie: Czemu pozioma linia <hr /> przylega mi do zdjęcia, ale już od tekstu się ładnie odsuwa?

<hr /> to skomplikowany znacznik, odradzam jego używanie. Do każdej przeglądarki musisz pisać na niego praktycznie osobny styl. W Operze np jest wszystko ładnie w Twoim przykładzie.

Czyli co sugerujesz?
<div class="line"></div>

i zakodowanie w css jak ma wyglądać?

Za dużo to nie pomogło: http://jsfiddle.net/E6nG9/2/

Witam.

Warto zerknąć na przeznaczenie znacznika <hr /> podane w specyfikacji.



Co luźno tłumaczy się tak:



Polecam użycie reset.css, niweluje to wiele upierdliwości podczas ostylowania strony.

Ok, zapomniałem dodać, ale używam html5reset: http://jsfiddle.net/E6nG9/3/

Pomoże ktoś: http://jsfiddle.net/LFg8a/
css od linii 109.

Nawet jeżeli zmienię na div line: http://jsfiddle.net/LFg8a/1/

Zerknij teraz ale w wersji wcześniejszej zarówno tekst jak i hr przylegały do zdjęcia @Opera/9.80 (X11; Linux i686; U; pl) Presto/2.10.289 Version/12.02

http://jsfiddle.net/LFg8a/3/

Ale tutaj nie chodzi o odstęp od zdjęcia z boku.
Układ ma pozostać taki jaki jest, ale linia <hr> czy <div line> ma pójść pod zdjęcie i ma mieć OD ZDJĘCIA odstęp powiedzmy 15px czyli margin-top: 15px dla hr.

Daj coś takiego w CSS i zobacz.

[HTML] pobierz, plaintext 
hr {
float:left;
width:100%;
margin:15px 0px 0px 0px;
}
 
[HTML] pobierz, plaintext 

Dzięki. http://jsfiddle.net/LFg8a/4/
Jakieś słowo wyjaśnienia?

Nie wiem czy to jest poprawnie dla hr -> float:left, ale jeżeli nie użyjesz dla elementu "float:left" to on nada automatycznie jakiś margin/top/left/... dla elementu. Dajesz float:left i przylega do obrazka odstęp określasz marginem i pod każdą przeglądarką powinno być tak samo.

Przetestuj sobie z float:left i bez niego ( bez float:left nie zadziała margin-top z tego co pamietam )