Jak porovnat dva HTML elementy?

Iný spôsob, ako zistiť príčinu, je použiť web inspector a pozrieť sa na to, odkiaľ to zobrazené rozdelenie prišlo.

V wp-content/themes/mantra/style.css je pravidlo, ktoré pridáva okraj všetkým obrázkom:

.mantra-image-seven .entry-content img[class*='align'], .mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'], .mantra-image-seven .entry-summary [class*='wp-block'][class*='align'] img {
    padding: 7px;
    ...

Aha. Tak to mě nenapadlo. V tom případě je to chyba šablony při přidání více map, protože druhý web používá stejnou šablonu a zobrazuje se správně.

Každopádně díky, ale pořád to není dokonalé.

Důvod, proč tam ty bílé čáry vůbec byly, je ten, že na mapě jsou okraje obdélníků, ze kterých se mapa skládá, což na druhém webu záhadně není.

Když přidám vlastní css, stačí pouze tohle

.mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'] {
    padding: 0px;
    border: none;
}

tím zmizí jak ohraničení, tak okraje.

Problém je, že značka má stále neprůhledné pozadí. V debug mode se mi to podařilo opravit pomocí

background-color: transparent;

ale nepodařilo se mi to přidat do css, aby to fungovalo.

Jak to, prosím Vás, udělám?

Problém vyřešen. U obrázku nestačí pouze uvést všechny jeho třídy, ale i třídy divu, ve kterém je.

Konečný kód je tedy

.mantra-image-seven .entry-content [class*='wp-block'][class*='align'] img, .mantra-image-seven .entry-summary img[class*='align'] {
    padding: 0px;
    border: none;
}

pro skrytí ohraničení rozdělení mapy a jejich okrajů

a

.leaflet-pane.leaflet-marker-pane .leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    background-color: transparent;
}

pro průhlednost značky.

Jedná se o web ve WordPressu, šablona Mantra a plugin ultimate map by supstic.

Akorát nechápu, proč u jedné mapy k ničemu nedojde, ale to není podstatné.

Každopádně díky