To prawdopodobnie podstawowa sprawa, więc jeśli jest jakiś rodzaj informacji online na temat działania tekstu i marginesów w html, po prostu prześlij mi link.

W każdym razie mam problem z określeniem dokładnych marginesów tekstu. Poniżej znajduje się przykład obrazu, div zawierający tekst pod nim i więcej tekstu poniżej div. Inne marginesy są ustawione na 0, a marginesy dla elementu div to 10 pikseli górny i dolny, 0 lewy i prawy. Z nieznanych mi powodów okazuje się, że góra 16px, dół 14px. Mógłbym po prostu zrekompensować błąd definicjami marginesów, ale tak naprawdę chciałbym wiedzieć, co się dzieje, zamiast leczyć objawy.

<img src="images/temp/img.png" />
<div><p>Testing</p></div>
<h2>Siirry</h2>

A styl div to

div {
    color:#f00;
    text-transform:uppercase;
    font-size:9px;
    line-height:9px;
    height:9px;
    margin:10px 0;
    overflow:hidden;
}

Przykładowy obraz:

Example

EDYTOWAĆ:

Więcej informacji, ponieważ mój punkt widzenia najwyraźniej nie wyszedł zbyt jasno: margines wynosi 10px według narzędzi takich jak Firebug. Nie o to proszę. Jednak ze względu na sposób renderowania czcionek pole tekstu jest w rzeczywistości większe niż rzeczywisty rozmiar tekstu. Powoduje to, że margines VISUAL jest większy niż zdefiniowany margines (co można zweryfikować mierząc go w Photoshopie lub podobnym oprogramowaniu). Poszukuję informacji o relacji między rozmiarem pola tekstu a rzeczywistym rozmiarem, aby móc poprawnie zdefiniować marginesy.

0
teel 31 maj 2011, 12:59

3 odpowiedzi

Najlepsza odpowiedź

Dzieje się tak, ponieważ czcionka nie wykorzystuje całej wysokości. Lepszym (choć może nie idealnym) wskazaniem byłoby zaznaczenie tekstu i sprawdzenie marginesów między czarną ramką a podświetlonym prostokątem. Dotyczy to również poniższego tekstu „testowanie”. Zajmie część z tych 14px.

2
GolezTrol 31 maj 2011, 13:03
Tak, właśnie to miałem na myśli z moim pytaniem. Chciałem zrozumieć podstawy, aby móc dokładniej ustawiać dokładne marginesy dla tekstów zawierających różne rozmiary czcionek.
 – 
teel
31 maj 2011, 15:54
Już ustalasz dokładne marginesy. Odstępu między literą a górną krawędzią wiersza nie można określić w CSS, ponieważ jest to właściwość czcionki, której używasz, i może się różnić w zależności od wersji czcionki, nie wspominając o różnych znakach w tej samej czcionce! Powinieneś projektować pod kątem wysokości linii, a nie czcionki. Jeśli z jakiegoś powodu potrzebujesz dokładnego pomiaru pikseli od litery, powinieneś zmierzyć tę odległość w narzędziu do rysowania i wprowadzić odpowiednie poprawki w swoim CSS. Ale myślę, że to powinien być wyjątek.
 – 
GolezTrol
31 maj 2011, 20:40
W takim przypadku należy zmierzyć odległość między górną krawędzią litery a górną krawędzią linii (którą najlepiej widać, jeśli tekst jest zaznaczony). Następnie odejmij zmierzoną liczbę pikseli od marginesu, który chcesz mieć. Tak więc, jeśli odległość od góry „H” do górnej części zaznaczenia wynosi 3 piksele, a margines ma wynosić 10 pikseli, należy ustawić margines na 7 pikseli. Jeśli jest to margines między dwiema liniami, powinieneś wykonać podobny pomiar od dołu „j” do dołu zaznaczenia. Następnie odejmij obie znalezione wartości od oryginalnych 10 pikseli, aby uzyskać rzeczywisty margines, którego potrzebujesz.
 – 
GolezTrol
31 maj 2011, 20:47
Tak dzieki. Sądzę, że będę musiał wtedy zastosować metodę ręczną.
 – 
teel
1 czerwiec 2011, 12:07

Nie mogę odtworzyć twojego problemu. Czy możesz odtworzyć problematyczną sytuację za pomocą http://jsfiddle.net/, aby podzielić się nią z nami?

Jednak są problemy z twoim CSS. Nie należy określać wysokości 9px na div (co najmniej 20px ze względu na marginesy). Określanie wysokości wiersza nie ma nic wspólnego z rozmiarem czcionki, ale z odstępem między dwoma wierszami tekstu (nie w twoim przypadku).

Ostatnia rzecz: czego użyłeś do pomiaru marginesów (16 i 14px)? Edytor obrazów? Powinieneś użyć czegoś takiego jak narzędzia programistyczne Firebug lub chrome.

0
solendil 31 maj 2011, 13:13
Tak, margines to 10px według firebuga itp. Do pomiaru użyłem Photoshopa, ponieważ potrzebuję dokładnie 10px odstępu między dokładną górą tekstu i obrazu, a nie tego, co przeglądarka uważa za 10px. Pole tekstu jest zwykle większe niż rzeczywisty rozmiar znaku.
 – 
teel
31 maj 2011, 15:44

Dla mnie wygląda dobrze

Tutaj dodałem trochę tła, abyście mogli zobaczyć, gdzie są pola: http://jsfiddle.net /Eric/fcHZN/3/

Między polami jest na pewno 10px luka. Wygląda na to, że dodatkowe odstępy pochodzą z obrazu lub tekstu Siirry, do których nie mamy CSS.

0
Eric 31 maj 2011, 16:04
Jeśli zrobisz zrzut ekranu i porównasz odstępy między tekstami i ramkami w Photoshopie, zobaczysz, że przestrzeń w rzeczywistości nie jest 10px.
 – 
teel
31 maj 2011, 15:46