# Radio buttons positioning

**URL:** <https://discourse.processing.org/t/radio-buttons-positioning/33123>\
**Category:** Coding Questions\
**Created:** [October 27, 2021, 7:50pm UTC](https://discourse.processing.org/t/radio-buttons-positioning/33123 "2021-10-27T19:50:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Clark](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Clark](https://discourse.processing.org/u/Clark)\
**Post date:** [October 27, 2021, 7:50pm UTC](https://discourse.processing.org/t/radio-buttons-positioning/33123/1 "2021-10-27T19:50:10Z")

</div>

Hi. I am trying to find a method to position radio buttons closer to each other vertically.  
When I write :

```auto
radio = createRadio();
    radio.option('option-1');
    radio.option('option-2');
    radio.option('option-3');
    radio.style("width", "80px");
    radio.position(50, 50);

```

I get the vertical distance of the first group of this image. But I would like to achieve a very close distance like in the second group. I have tried a lot of different style options like:

> radio.style(‘margin-top’, “-1px”)

, padding, etc., but nothing works. Is this possible?

![radioButton](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fc32c292422a0b0cfbcf6cd6d73a4f23f4cea1ce.png)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 28, 2021, 12:31am UTC](https://discourse.processing.org/t/radio-buttons-positioning/33123/2 "2021-10-28T00:31:22Z")

</div>

https://preview.p5js.org/Kumu-Paul/embed/Xe3gEY-g4

```javascript

  radio = createRadio();
  radio.option("option-1");
  radio.option("option-2");
  radio.option("option-3");
  let options = selectAll("input[type='radio']", radio);
  // Update the style for each option
  for (let opt of options) {
    opt.style("position", "relative");
    // The more negative these are the more the options will overlap
    opt.style("margin-top", "-1px");
    opt.style("margin-bottom", "-1px");
    // by default, when you mess with vertical spacing, the buttons get a
    // misaligned from the labels, adjust this to taste.
    opt.style("top", "2px");
  }
  radio.style("width", "80px");
  // radio inputs and labels are displayed inline, so line-height introduces
  // space between them when the wrap over multiple lines.
  radio.style("line-height", "0");
  radio.position(50, 50);

```

You could also do something similar with a stylesheet.

---

<div class="post-metadata">

**Author:** ![Clark](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Clark](https://discourse.processing.org/u/Clark)\
**Post date:** [October 28, 2021, 12:36am UTC](https://discourse.processing.org/t/radio-buttons-positioning/33123/3 "2021-10-28T00:36:22Z")

</div>

Thank you so much for this!