{"id":5856,"date":"2023-01-16T10:00:38","date_gmt":"2023-01-16T09:00:38","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=5856"},"modified":"2024-10-01T13:58:28","modified_gmt":"2024-10-01T11:58:28","slug":"paragrafo34","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo34\/","title":{"rendered":"\u00a7\u00a034. Come ridurre gli spazi attorno al bottone \u00abDonazione\u00bb di PayPal"},"content":{"rendered":"

Il ben noto a tutti bottone giallo del PayPal che permette ai proprietari e autori dei siti di raccogliere le donazioni (e finanziare in tal modo i propri progetti) è uno strumento bello, comodo e utile. Allo stesso tempo, però, molto spesso causa un problema fastidiosissimo agli sviluppatori front-end: sopra e sotto il bottone potrebbero comparire, senza essere voluti, degli enormi spazi vuoti unitili di origine sconosciuta.
\nEbbene, eliminarli è molto più facile di quanto possa sembrare.
\n
\nIl codice html del bottone «Donazione» fornitoci dal sito di PayPal è il seguente:<\/p>\n

\n<form action="https:\/\/www.paypal.com\/donate" method="post" target="_top">\n<input type="hidden" name="hosted_button_id" value="SSG9AUUBGY5XJ" \/>\n<input type="image" src="https:\/\/www.paypalobjects.com\/it_IT\/IT\/i\/btn\/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Fai una donazione con il pulsante PayPal" \/>\n<img alt="" border="0" src="https:\/\/www.paypal.com\/it_IT\/i\/scr\/pixel.gif" width="1" height="1" \/>\n<\/form>\n<\/pre>\n
\nIn realtà esistono anche altre versioni grafiche dello stesso bottone con i codici di inserimento propri, ma la soluzione del problema è sempre la stessa.
\nLa colpa degli spazi vuoti di cui sopra è della sequenza dei tag <input> e <img> nel codice riportato sopra: nel foglio di stili CSS del nostro sito – sulle pagine del quale viene inserito il bottone – potrebbe essere impostato il margin superiore e\/o inferiore per quei tipi di tag (come per tutti gli elementi che si trovano nel div del contenuto della pagina). Nel caso specifico, i tag <input> e <img> del buttone PayPal sono invisibili all’utente, ma il CSS del nostro sito non lo sa e applica comunque i margin che abbiamo impostato. Di conseguenza, la soluzione più semplice del problema degli spazi vuoti inutili secondo me si realizza in due passaggi:
\n1. Mettiamo il codice del bottone tra i tag <div class="paypalbutton"> … <\/div>
\n2. Nel file CSS impostiamo il margin pari a zero per i tag contenuti nel div appena creato.<\/p>\n
\n.paypalbutton { float: both; padding: 0; marin: 0; }\n.paypalbutton input { padding: 0; }\n.paypalbutton img { padding: 0; }\n<\/pre>\n
\nNelle situazioni pratiche concrete capitate a me il metodo ha funzionato come previsto: gli spazi inutili sopra e sotto il bottone sono spariti!
\nTempo fa nel codice del bottone fornito dal sito di PayPal erano presenti pure dei tag <br \/>: anche essi contribuivano ad aggravare il problema degli spazi vuoti. Nessuno può garantirci che un giorno non tornino nelle nuove versioni del codice, quindi per sicurezza vi avviso: se li vedete, toglieteli con serenità (sono inutili al fine del funzionamento del bottone).
\nBene, a questo punto non mi resta altro che ricordarvi di usare l’opzione delle donazioni per sostenere i vostri siti preferiti: ovviamente nei limiti del possibile.<\/p>\n","protected":false},"excerpt":{"rendered":"
Il paragrafo dell\u2019\u201cInerario\u201d dedicato a uno dei modi possibili di ridurre (o azzerare) gli spazi vuoti attorno al bottone \u201cDonazione\u201d di PayPal.
\nQuesto paragrafo \u00e8 stato pensato per gli sviluppatori e gli autori dei siti che intendono di raccogliere i finanziamenti per i propri progetti senza rovinare il design delle pagine pubblicate.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":34,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-5856","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/5856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=5856"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/5856\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=5856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}