W HTML przyciski są elementami klikalnymi używanymi do wykonywania konkretnej akcji. Większość przycisków jest umieszczona blisko siebie, ale możesz dać miejsce między dwoma przyciskami za pomocą właściwości marginesu CSS. W tym celu możesz użyć właściwości marginesowej lub właściwości prawej marginesu.

W tym artykule dowiesz się, jak dać przestrzeń między dwoma przyciskami za pomocą CSS. Ale najpierw dowiedz się o właściwościach lewicowych i prawej marginesu. A więc zacznijmy!

Czym jest właściwość CSS „margines”?

W CSS „margines lewic„Własność jest wykorzystywana do tworzenia przestrzeni z lewej strony elementów. Element będzie dalej od swoich sąsiadów, jeśli wartość jest dodatnia, podczas gdy zbliża się do sąsiadów, jeśli określona wartość jest ujemna.

Składnia

Składnia właściwości marginesowej jest następująca:

margines-lew: wartość

W miejscu "wartość”, Ustaw margines, który chcesz dać elementowi z lewej strony.

Czym jest właściwość CSS „prawej marginesu”?

„„margines-prawy„Własność CSS jest wykorzystywana do tworzenia przestrzeni z prawej strony elementu. Umieszcza obszar marginesu po prawej stronie elementu. Wartość domyślna właściwości prawej marginesu jest ustawiona jako zero; Jednak możesz określić zarówno wartości dodatnie, jak i ujemne.

Składnia

Składnia właściwości prawej marginesu podano poniżej:

margines-prawy: wartość

Umieść "wartość„Który chcesz ustawić jako margines z prawej strony elementu.

Jak dać miejsce między dwoma przyciskami?

Możesz tworzyć przestrzeń między dwoma przyciskami za pomocą „margines lewic" I "margines-prawy" nieruchomości. Aby to zrobić, w sekcji HTML dodamy nagłówek za pomocą

i utwórz dwa przyciski o nazwie klasy „BTN1" I "BTN2”Odpowiednio.

Html

Utwórz przestrzeń między dwoma przyciskami

Kliknij
Kliknij

Domyślnym wynikiem danego kodu jest:

Teraz przejdź do CSS, aby stworzyć przestrzeń między tymi dwoma przyciskami.

Przykład 1: Podawanie miejsca między dwoma przyciskami za pomocą właściwości marginesowej

Tutaj użyj „.BTN1„Aby uzyskać dostęp do pierwszego przycisku dodanego w HTML i ustaw wartość właściwości prawej marginesu jako„100px".

CSS

.BTN1
margines-prawy: 100px;

Jak widać, przestrzeń jest tworzona po prawej stronie pierwszego przycisku:

W następnym przykładzie użyjemy „margines lewic„Własność, aby stworzyć przestrzeń między dwoma przyciskami.

Przykład 2: Podawanie miejsca między dwoma przyciskami za pomocą właściwości marginesowej

Użyjemy ".BTN2„Aby uzyskać dostęp do drugiego przycisku utworzonego w pliku HTML i przypisać wartość właściwości marginesowej jako„50px”:

.btn2
Margin-left: 50px;

Po tym przestrzeń jest tworzona po lewej stronie drugiego przycisku, który można zobaczyć poniżej:

Chcesz używać obu właściwości jednocześnie? Sprawdź następny przykład!

Przykład 3: Podawanie przestrzeni między dwoma przyciskami za pomocą właściwości marginesowych i prawej marginesu

Możesz także ustawić margines obu przycisków, aby dać między nimi miejsce. Aby to zrobić, stworzymy przestrzeń z prawej strony pierwszego przycisku i z lewej strony drugiego przycisku za pomocą właściwości prawej marginesu i marginesu, odpowiednio:

.BTN1
margines-prawy: 70px;

.btn2
margines lewica: 70px;

Wyjście

Zapewniliśmy najprostszą metodę związaną z dawaniem miejsca między dwoma przyciskami w CSS.

Wniosek

"margines lewic" I "margines-prawy„Właściwości CSS są używane do zapewnienia miejsca między dwoma przyciskami. Za pomocą tego możesz dostosować przestrzeń z prawej i lewej strony przycisków. W tym artykule wyjaśniliśmy, jak dać przestrzeń między dwoma przyciskami przy użyciu dwóch różnych metod i podaliśmy przykłady dla każdego z nich.