Minimalna wysokość dla dz lub zakresu z pustego elementu

Question

Kiedy zamknięcia w span lub div ciąg znaków, który stanie się pusty łańcuch lub zawiera tylko spacji, że część ta nie ma żadnego wzrostu, a gdy to span lub div jest dalsze osadzone w coś podobnego do table, że komórka nie ma wystarczającej wysokości i wygląda źle. Jak mogę się upewnić, że wartość span lubwynosi co najmniej tyle, o ile ciąg ma inne znaki? To jest coś takiego jak robienie \strut w TeX. Mogę albo wstawić coś do struny, albo dostosować css.

Próbowałem, umieszczając następujące w odpowiedniej klasie css, ale problem polega na tym, że muszę ręcznie dostosować wysokość napisu (nie jestem pewien, czy jest to "1em", prawdopodobnie nie). Jaki jest właściwy sposób na zrobienie tego?

min-wysokość: 1em;

Answer 1

Twój span elementem musi stać się elementem bloku jeśli chcesz ustawić jego wysokość. Ustaw odpowiednio styl display: block lub display: inline-block.

span.item { 
    display: inline-block; 
} 

Aby ustawić wysokość pustym przedziale, Znalazłem to najlepiej po prostu wstrzyknąć   zamiast ustawić min-height. (UPDATE: za @sawa, zamiast charakter non-breaking space, być może bardziej odpowiednia postać będzie trwać nie przestrzeń, czyli Unicode ZERO szerokości spacji charakteru \200b.)

span.item:empty:before { 
    content: "\200b"; /* unicode zero width space character */ 
} 

To zadziała, niezależnie od rozmiaru czcionki, i pozwoli uniknąć problemów z linią bazową, która nie będzie zawierać sąsiedniego tekstu. Spójrz na linię z napisem "Huh?" poniżej:

http://plnkr.co/edit/GGd7mz?p=preview

(Zobacz podobne pytanie: https://stackoverflow.com/a/29354766/516910)

Answer 2

Twój kod jest nieprawidłowy: nie musisz wypełniać cudzysłowów ("") wokół wartości w CSS.

Albo zastosowanie:

min-height: 1em; /* I am not sure if one can use em with height properties */ 

lub użyj:

min-height: 12px;