How can i remove the white space in between radio buttons?

HTML-CSS
1

I’m working on the Form project, and i’m stuck on the radio button part. I don’t know why but there is a white space in between the button and the text here is the pen: https://codepen.io/fez994/pen/XBoWOr
I’ve been googling for the past 2 hours without finding anything, can you guys help me?

2

There is no white space between the button and text, you have mistakenly styled the radio buttons.
Check your .form-row > input class in css file. Here you have given theflex: 2 that is causing the radio button elements to stretch to the parent container. you need to remove that and set the format accordingly.

3

So I’m not super familiar with flex. But its your flex properties that are causing that space.

As a recommendation what I always do as I am working on the CSS of my pages. Open your page in a second tab, and go to the full page view. Then right click on an element, usually the one in question, and select inspect (in chrome) this opens the developer tools. There you can get a good visual of what CSS is actually being rendered on the element plus a visual of the margin and padding space around said elements.

If you look at the screenshot I included you can see that I have a part of the html that is your radio buttons highlighted and you can see that actual space the item is taking up (in blue) and the margin space around it( salmon). I find this to be a crazy useful tool when working with my CSS.

Developer%20Tools
Developer%20Tools1366×768 281 KB

2 Likes
4

Yeah and how do i do it? I use flex:2 so it stays on the right. if i don’t use this property then the form is not aligned

5

@fez994 you should always first make the complete html markup, and later add the css to each element accordingly using developer tools as @NaoG said. This is very important because css can be frustrating many times :confused: but if we follow a steady approach things will start getting clearer, coming to the problem there are some loop holes in your css code:
you need to remove thses classes from your css code:

.form-row > input {
 	flex: 2;
 }

.form-row > select {
  	flex: 2;
  	padding: .5em;
  }

and add replace the code of .form-row and form-row > label classes with following :

.form-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: .5em;
 }

.form-row > label {
    padding: .5em 1em .5em 0;
 }

though this will not complete the challenge you still need to style the form properly.
You can only get good at this if you practice it, try to understand the logic behind every property and then try to implement, in the beginning it is not going to be easy, but eventually you’ll understand it. Happy Coding! :slightly_smiling_face:

1 Like