Space between radio button and the word

there is a space between my radio button and the word comes next to it and the margin doesn’t work
what should i do?

 <p class="p">Would you recommend freeCodeCamp to a friend?</p>
<label>
  <input name="radiobtn"
         type="radio"
         value="definitely"           class="radiobtn" 
         />definitly
.p{
  font-size:25px;
  margin-right:240px;
  
}

.radiobtn{
  margin-right:25px;
}

Just remove the margin-right (25px) in radiobtn class

1 Like

@Pheonix22 just do what he said its right

The margin-right: 25px creates the space because the input tag is a radio, the text doesn’t count into it. So it is just the little rond and if you write in your CSS to put a space at the right of it, it will put the space between the text and the rond input element.

If you want to put a marge at the write of your radio list, you can create a block such as a div before your label tag and a close div after the input tag. :slightly_smiling_face:

i did that but still the radio button is in the center and the text is at right and there is a space between them

i did what he said but still the radio button is in the center and the text is at right and there is a space between them

i removed that but still there is a space between them

Where are you coding? On local on your computer or on something as CodePen? Because I tested on my side and it works. If you are in local, save well your CSS code and refresh the page on the browser. And if you still got the issue try to clean the browser data

i’m coding on codepen

This is what I have on an editor on computer

HTML:

<p class="p">Would you recommend freeCodeCamp to a friend?</p>
<label>
   <input name="radiobtn" type="radio" value="definitely" class="radiobtn" />definitly
</label>

CSS:

.p{
  font-size:25px;
  margin-right:240px;
  
}

.radiobtn{
  /*margin-right:25px;*/
}

RESULT:

Maybe another part of the code gives trouble, could you give me the link of your entire code to check it?

Thanks in advance

1 Like

this is the link thank you for checking it<3

1 Like

Thanks! I am gonna check it :slightly_smiling_face:

1 Like

I give you a link you can watch I put comment into it, I found the issue :wink:

I didn’t give the super answer just in case you wanna figure out by yourself

2 Likes

thanks a lotttttt i’ll try to fix my code
again thanks for putting your time on this :sparkling_heart:

1 Like

No problem, if I can help it is the most important! I did some updates again, maybe it will be easier to understand, don’t hesitate to contact me if you need :wink:

1 Like

On a browser hitting F12 openes the developer tools, which include an inspector tab that allows to select items from the website, see them in the html-code and even play around with the CSS attributes (de-/activation them, adding or deleting some) and see what happens.

The dev-tools only affect the DOM, meaning they don’t change the actual code but just the rendered website - meaning you cannot break anything and worst case just refresh the page to undo all changes.

She is working on CodePen so kind of way it works the same if we can say. She can change and see directly what’s happen. The issue she got is not big, it is about a tag she uses in her CSS code

Kinda - but with the devtools she can directly interact with the element, whereas with codepen she’d still have to do the workaround of changing the CSS. Which for small projects might not make a huge difference - but the moment project get bigger, the devtools offer a better tool for inspection.

okay i’ll ask you if i have a question thank you:>>>>

1 Like

I agree it is a good feature, but in CodePen it makes many windows opened, the HTML one, the CSS one, the JavaScript one and then the view of your page. In more in CodePen if you use the keys shortcut, it will not target your page but the CodePen template. To select the view of your page, you should clic right on the view then inspect it.

After, as you said, it is a good feature to use in projects, but let’s say that when you code on CodePen, it must be for little things, according to me.

1 Like