ラジオボタンやボタンの配置（左端からの位置やボタンどうしの間隔）を設定したい

Question

前提

MS Wordの段落やタブ設定の様に、ラジオボタンの左端からの位置やラジオボタンとボタンの間隔設定のために手軽な方法として（スペース）を挿入しています。
この方法はアナログ的で、感覚的な設定になるので、CSSやJavascript（またはHTMLの中で）など使って、数値的に設定したい。

実現したいこと

ラジオボタンを左から〇〇（具体的数値）、ラジオボタンとボタン、そのボタンと他のボタンの間隔を具体的な数値で設定したい。

発生している問題・エラーメッセージ

特に発生しておりません。

該当のソースコード

<script>
document.addEventListener('change',()=>{
  goBtn.disabled=!document.querySelector('[name="a"][value="1"]').checked;
});
window.addEventListener('DOMContentLoaded', ()=>{
  backBtn.addEventListener('click',()=>{
    location.href="index.html";
  });
  goBtn.addEventListener('click',()=>{
    location.href="sample.html";
  });
});
</script>

&nbsp; &nbsp; &nbsp; &nbsp;
<label><input type="radio" name="a" value="1">同意する</label><br>
&nbsp; &nbsp; &nbsp; &nbsp;
<label><input type="radio" name="a" value="2">同意しません</label>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input type="button" name="button" id="goBtn" value=" 次へ " disabled>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input type="button" name="button" id="backBtn" value=" 戻る ">

試したこと

margin 等の参考使用例を色々試してみたが、実現しなかった

補足情報（FW/ツールのバージョンなど）

Adobe Dreamweaver 21.3。

Comments

[itagagaki]

普通にCSSでデザインできそうなものですけど、JavaScriptのタグが付いているのは理由があるのですか？

[A.Kameyama]

ご指摘いただきありがとうございました。Javascript の要否も分からない程度の新人です。Javascriptのタグは削除した方がよいですか？

[hatena19]

> margin 等の参考使用例を色々試してみたが、実現しなかった

CSSの margin で普通にできると思うけど、何を試して、どうだめだったのか具体的に説明してもらえますか。

[A.Kameyama]

試行した「margin」は、ボタンの文字周囲（時計方向に上、右、下。左 ？ の数字）のスペースを設定するものしか見つかりませんでした。
特にラジオボタンの位置を、左端から「いくら（値）」と云うのも見つかりませんでした。参考書も購入しましたが、中々理解できません。

Answer 1

margin-left で要素の左側の余白を設定できます。

要素の特定はいろいろな方法がありますが、要素に class か id をつけて、CSSではそれをつかったセレクタで特定する方法が基本です。他にも、属性値でする方法とかいろいろあります。

CSSセレクタのチートシート｜37パターンを一覧で解説｜webliker（ウェブライカー）
どのセレクタを使うかはなかなか難しいですが、
スタイルを個別に調整したい場合、セレクタは広い範囲に適用されるものはさけたほうがいいです。

今回のHTMLならボタンにはidが付いているのでそれを使うのがいいでしょう。
ラジオボタンは適当なclassを付加するか、input と name属性値を使うといいでしょう。

下記のような設定で質問のコードとほぼ同じ余白になります。

<label><input type="radio" name="a" value="1">同意する</label><br>
<label><input type="radio" name="a" value="2">同意しません</label>
<input type="button" name="button" id="goBtn2" value=" 次へ " disabled>
<input type="button" name="button" id="backBtn2" value=" 戻る ">

input[name="a"] {
  margin-left: 50px; 
}
#goBtn2 {
  margin-left: 65px; 
}
#backBtn2 {
  margin-left: 85px; 
}

Comments

[A.Kameyama]

所用でお礼が遅くなりました。
早速のアドバイスを頂きありがとうございました。
早速試してみましたが、「#box２....margin-left: 50px;」の 50 の数字を変えてみましたが、ラジオボタンの位置に変化が認められませんでした。
他のボタン位置は変化します。
HTML の 記述分の前に「<style>（ここにCSSを挿入）</style>」として挿入していますが、間違っているでしょうか？

[hatena19]

#box２ が余分でした。削除してください。(テスト環境の設定が残っていました。)
回答も修正しておきました。

[A.Kameyama]

早速修正のご連絡を頂きありがとうございました。
所定の機能が確認できました。
今後の参考にさせていただきます。

Answer 2

input {
    margin-left: 10px;
}
input[type="radio"] {
    margin-left: 100px;
}

このようにCSSセレクタにはHTML要素の属性値も指定できます。input という指定ではラジオボタンだろうがボタンだろうがすべてのinput要素に適用されますが、[type="radio"]を付ければラジオボタンに限定して適用されます。

こちらのページがわかりやすいと思います。
input要素のスタイルを属性値で指定し分ける－ウェブ制作チュートリアル

Comments

[A.Kameyama]

早速のアドバイスを頂き感謝感謝です。
試してみましたが、即解決いたしました。
ありがとうございました。
この世界では全くに近い初心者ですが、大変勉強になります。
今後ともよろしくお願いします。