In HTML, i pulsanti sono elementi cliccabili utilizzati per eseguire un'azione specifica. La maggior parte dei pulsanti è posizionata vicina l'una all'altra, ma puoi dare spazio tra due pulsanti usando la proprietà del margine di CSS. Per questo, puoi utilizzare la proprietà a sinistra margin o la proprietà margin-destra.

In questo articolo, imparerai come dare spazio tra due pulsanti con l'aiuto di CSS. Ma, prima, impara a conoscere le proprietà marginali e margin-destra una per una. Quindi iniziamo!

Qual è la proprietà CSS "margine-sinistra"?

In CSS, "margine-sinistra"La proprietà viene utilizzata per creare spazio dal lato sinistro degli elementi. L'elemento sarà più lontano dai suoi vicini se il valore è positivo, mentre si avvicina ai suoi vicini se il valore specificato è negativo.

Sintassi

La sintassi della proprietà margin-sinistra è la seguente:

Margin-Left: Valore

Al posto di "valore", Imposta il margine che si desidera dare all'elemento dal lato sinistro.

Qual è la proprietà CSS "margine-destra"?

IL "margine-destra"La proprietà di CSS viene utilizzata per creare spazio dal lato destro dell'elemento. Posiziona l'area del margine sul lato destro dell'elemento. Il valore predefinito della proprietà margin-destra è impostato come zero; Tuttavia, è possibile specificare valori sia positivi che negativi per questo.

Sintassi

La sintassi della proprietà margin-destra è riportata di seguito:

margine-destra: valore

Posiziona il "valore"Che si desidera impostare come margine dal lato destro dell'elemento.

Come dare spazio tra due pulsanti?

Puoi creare spazio tra due pulsanti usando il "margine-sinistra" E "margine-destra" proprietà. Per fare ciò, nella sezione HTML, aggiungeremo un'intestazione usando

e crea due pulsanti con il nome di classe "btn1" E "btn2"Rispettivamente.

Html

Crea spazio tra due pulsanti

Cliccami
Cliccami

Il risultato predefinito del codice dato è:

Ora, spostati sul CSS per creare spazio tra questi due pulsanti.

Esempio 1: dare spazio tra due pulsanti usando la proprietà margin-destra

Qui, usa ".btn1"Per accedere al primo pulsante aggiunto nell'HTML e impostare il valore della proprietà margin-destra come"100px".

CSS

.btn1
margine-destra: 100px;

Come puoi vedere, lo spazio viene creato sul lato destro del primo pulsante:

Nel prossimo esempio, useremo il "margine-sinistra"Proprietà per creare spazio tra due pulsanti.

Esempio 2: dare spazio tra due pulsanti usando la proprietà a sinistra margin

Noi useremo ".btn2"Per accedere al secondo pulsante creato nel file HTML e assegnare il valore della proprietà margin-sinistra come"50px":

.btn2
Margin-Left: 50px;

In tal modo, lo spazio viene creato sul lato sinistro del secondo pulsante che può essere visto di seguito:

Vuoi usare entrambe le proprietà contemporaneamente? Dai un'occhiata al prossimo esempio!

Esempio 3: dare spazio tra due pulsanti usando le proprietà margini-sinistra e margine-destra

Puoi anche impostare il margine di entrambi i pulsanti per dare spazio tra loro. Per fare ciò, creeremo spazio dal lato destro del primo pulsante e dal lato sinistro del secondo pulsante usando le proprietà di margine-destra e margine-sinistra, rispettivamente:

.btn1
margine-destra: 70px;

.btn2
Margin-Left: 70px;

Produzione

Abbiamo fornito il metodo più semplice relativo al dare spazio tra due pulsanti in CSS.

Conclusione

"margine-sinistra" E "margine-destra"Le proprietà dei CS vengono utilizzate per dare spazio tra due pulsanti. Usando questo, è possibile regolare lo spazio dai lati destro e sinistro dei pulsanti. In questo articolo, abbiamo spiegato come dare spazio tra due pulsanti usando due metodi diversi e fornito esempi per ciascuno di essi.