Controlling the spacing with buttonsets

The jQuery UI toolkit gives developers a container widget used for working with groups of buttons called a buttonset. You would use a buttonset for things like groups of checkboxes or groups of radio buttons—things that form a collaborative set.

The default appearance of the buttonset is of a unified whole. That is, the goal is to form a seemingly single widget out of several buttons. By default, the buttonset widget has no spacing controls for the developer. The buttons within the set, by default, are all stacked up against one another. This may not be what we're after, depending on the context of the buttonset widget in our overall user interface.

Getting ready

To better illustrate the spacing constraints we're presented with, let's build a buttonset widget and look at the result before we go about trying to resolve the issue. We'll use the following group of radio buttons as our markup:

<div>
    <input type="radio" id="first" name="items"...