flex inline-block nadanie stalych rozmiarow spana jesli nie ma zawartosci

pytanie zadane 10 listopada 2017 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

Siema moglby mi ktoś podpowiedzieć jak zrobić tu tak by wysokość miała taką sama jak elementy z tekstem a szerokość minimalna np. 30px ? Bo probuje ustawić i nie działa :/

https://codepen.io/anon/pen/POpjpy

komentarz 10 listopada 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

O to ci chodziło ?

https://codepen.io/shiroUmizake/pen/gXmXKZ

komentarz 10 listopada 2017 przez Ziuziek Mądrala (5,140 p.)
edycja 10 listopada 2017 przez Ziuziek

niee, chodzi o to że elementy span bez tekstu w srodku wyglądają tak jak ten czerwony ostatni kwadrat i chodzi o to ze jeśli pojawi się span bez tekstu by nie był takim malym kwadracikiem, a miał nadane wartości jakies minimalne, (wysokość taka jak elementy te z tekstem, i szerokość np. minimum jakies 30px

edit

chodzi o to ze jak nadasz min-width: 50px; min-height: 50px; to elementy się rozjezdzaja, czemu tak i jak to naprawić??

komentarz 10 listopada 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
edycja 10 listopada 2017 przez ShiroUmizake

https://codepen.io/shiroUmizake/pen/gXmXKZ

Twój problem polegał na tym że span domyślnie ma ustawiony display inline. A to znacza tyle, że element nie posiada ani wysokości ani szerokości (oprócz liniowej). Pokaże ci na przykładzie:

https://codepen.io/shiroUmizake/pen/NwpyRX

Zobacz, specjalnie dodałem br by ci pokazać, że ten element nie ma wysokości, a tylko wysokość lini. Przez co jest ta niebieska przestrzeń.

Drugi przykład to, ze jak dam display inline-block to już się pojawia wysokość i szerokość. Przez to, że jest to display inline-block to przeglądarka sprawdza czy jest miejsce i się przykleja (tu nie ma żadnego float)

A trzeci jak widzisz ignoruje dostowanie się w lini i przeglądarka go zrzuca na dół.