My css for radio input tag:

.radio-label-type {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block-radio {
  width: 50px;
}

Then, in my form, I have radio input tags:

<div class="radio-label-type">
   <input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic </input>
   <input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author </input>       
</div>

The 'topic' and 'author' words are next to the radio input tags, but they are at a short distance. How can I adjust their distance to make the text much closer to the radio tag?

CodePudding user response：

You can achieve it using margin-right in your CSS. Like This:

<div class="radio-label-type">
   <input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic
   <input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author
</div>

.radio-label-type {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block-radio {
  width: 50px;

 /* Add this to decrease the text and radio button spacing*/

  margin-right: -20px;

/* To increase the distance  */
/* margin-right: 20px        */
}

Check out this JSFiddle

CodePudding user response：

Generally input tags don't have closing tag so you should wrap with a div.

.radio-label-type {
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .block-input {
      margin-inline:20px ;
  }
  .block-input input{
      margin-inline: 15px;
  }

<div class="radio-label-type">
    <div class="block-input"><input class="block-radio" type="radio" name="nodeType" id="topic" value="topic">topic
    </div>
    <div class="block-input"><input class="block-radio" type="radio" name="nodeType" id="topic" value="topic">author
    </div>
  </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can simply target input type and set space what you want.

input[type="radio"]{
  margin-right: -5px;
}

<div class="radio-label-type">
   <input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic </input>
   <input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author </input>       
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>