Tips for adjusting the proximity of text to the input radio tag

Exploring css radio input style:

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

Next, within the form, there are radio inputs:

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

The text 'topic' and 'author' align next to the radio inputs but seem too distant. How can I adjust their alignment for a closer appearance?

Answer №1

To achieve this effect in your CSS, you can utilize the margin-right property. Here's an example:

<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;

 /* To decrease the spacing between text and radio button, add this line */

  margin-right: -20px;

/* To increase the spacing, use */
/* margin-right: 20px        */
}

You can view a live demo on JSFiddle

Answer №2

Typically, input tags do not have a closing tag so it is recommended to wrap them within a div element.

.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>

Answer №3

To customize the spacing for input types, you can target them directly and adjust as needed.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the `document.documentElement` consistently defined and always representing the HTML element?

I am looking to make changes to the <html> element using a script within the <head> section of an HTML page. My goal is to only access and modify the <html> element itself, without affecting any of its children. Should I wait for the DOM ...

Using jQuery to retrieve the content of a span element by its class name

Is there a way to retrieve the value of a span using just the class name? There is only one matching span in the document. My attempt with $('span.foo').text(); did not work. Any suggestions on how to accomplish this? ...

The jQuery hover function is not functioning properly on page load in Firefox

While this code is functioning smoothly in Chrome and IE, it seems to be encountering issues in Firefox! <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> JS: $(window).load(function(){ $("#bosti ...

Using CSS with absolute positioning and dynamic height

There are 4 consecutive <div> tags in absolute position, aligned using top and left. The third div tag has dynamic content, causing its height to adjust based on the text within it. However, since the top and left properties are set for all divs, th ...

What is the best way to transform the incoming data using JavaScript?

The data I have from Algolia in my project includes a seconds data presented as an array. This is the method I use to extract the seconds data from Algolia: @if(isset($content['length'])) <div class="flex items-center space-x-6"> ...

Instructions on adjusting div size to fit images

Here's the scenario .headerpic { width:100%; background-image:URL("../images/layout/header.png"); background-size:cover; } The issue I'm facing is getting the height to adjust according to the image. I've attempted. height:100%; Unfortun ...

Tips on toggling between slides with Bootstrap Carousel

I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an iss ...

Practicing the basics of a simple 3-column layout before delving into the world of

Currently, I am working on a three column layout that appears to be functioning well on the surface. However, upon inspecting the page using developer tools, it becomes apparent that the margin of the third middle column is overlapping with the neighboring ...

Troubleshoot: Unable to trigger change event for input type file

Hey, I'm trying to capture and display the file name that a user selects using an input type file control. Unfortunately, the jQuery onchange event doesn't seem to be working in IE 8. Does anyone have a solution for this? // Here's my jQuer ...

Conceal or Reveal Navigation Tabs on Your Website

I recently added a fixed navigation link to my website and also implemented it in the forums and blog section. However, I have noticed that some users find the navigation link to be irritating while browsing the forums. To address this issue, I would like ...

Long content within an editable div in a table causes the div to exceed its percentage-width

Recently, I encountered an issue while using Chrome. Inside a table, there is an editable DIV with a width defined in percentage. The CSS for the DIV looks like this: div#editable { width:20%; white-space:nowrap; overflow:hidden; borde ...

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

Javascript issue with unresponsive buttons

I've been experimenting with animations on a webpage, particularly with turning a circle into a carousel to display more information. I was inspired by CodingNepal's infinite carousel idea. Everything looks good except the buttons (i tag) are not ...

Tips for including a lang attribute in HTML tags within Next.js

When I ran a performance check on my Next.js portfolio site, I discovered that the main index.html is missing a lang attribute. This absence results in a deduction from the accessibility score. I could add the locale by configuring i18n setup in the next. ...

Verification of data using PHP, MySQL, and jQuery

I'm currently working on a process to extract data from an Excel file and then pass it on to a PHP file for validation against a database. If the data doesn't exist in the database, a message will be displayed to notify the user of incorrect data ...

Performance issues are being experienced on website for tablet and smartphone usage due to slow loading times

My client's website is running on an old Dell PowerEdge 2600 with Windows Server 2008. While desktop and laptop access to the site is smooth, access from tablets and smartphones is extremely slow, taking over 10 minutes to load or sometimes not loadin ...

Prevent submission by deactivating the button if a file has not been

I need help implementing a solution to disable a submit button until a file is selected. I found a working example online, but I'm not sure if the issue lies with the script type. Here's the example I'm referring to: disable submit button u ...

Is there a way to reduce the height of the border-left property in CSS?

In creating a simple address panel, I have divided it into three sections: address, phone number, and email. Each section includes an icon and a paragraph next to it. To align these sections side by side, I used the vertical-align: top and display: table p ...

A guide to examining the HTTP response body, including HTML content, using Wireshark

After entering the URL in the address bar of the virtual machine's browser, a request for an HTML document from my host computer was made. The HTML document, which I had personally written, successfully appeared in the virtual machine's browser. ...

tips for aligning figcaption vertically to image within figure

Is there a way to vertically align the text in the figcaption with the image in this figure? Check out an example here: http://jsfiddle.net/YdATG/1/ Here is the HTML code: <section class="links"> <a href="#"> <figure class="grid-pa ...