Van ez a nagyon egyszerű html kód, 5 képpel, aminek ki kéne tölteni az oldalt. Miért van, hogy Chrome-ban működik, de a Safariban egy rés van a kis képek között?

A button osztályú kép display CSS-tulajdonságát állítsd blokkszintűvé:

img.button {

width: 100%;

height: 50%;

display: block;

}

"A display: block; -ra gondolsz?"

Így van.

"Mit jelent az hogy blokkszintű?"

Egy blokkszintű elem elfoglalja szülőelemének (tárolójának) a teljes vízszintes terét, és a tartalom magasságával megegyező függőleges teret, ezáltal "blokkot" hoz létre. ( [link] )

"És eddig milyen volt?"

Soron belüli:

[link]

lásd:

Chromium (amin a Google Chrome is alapul) 111.0.5563.0 alatt működik:

[link]

De ha szépen, hatékonyabban szeretnéd megoldani, akkor a két, a gombot alkotó képet vond egybe.

Sőt, mivel igen egyszerű alakzatról van szó, hatékonyabb vektorgrafikus SVG-t használni (a 4, gombokat alkotó kép 17633 bájt, az egy darab SVG 166 bájt):

[link]

az ehhez tartozó HTML (csak a tartalmat és annak strukturálását tartalmazza, a stíluslap külön fájlba költözött):

[link]

és a CSS (az előbb említett SVG-t háttérképként használja fel):

[link]