How to add margin/space between items in a RadioButtonList in asp.net

RadioButtonList Item Css Margin

RadioButtonList is an asp.net list web server control that render a single selection radio button group in web browser. the following asp.net c# example source code demonstrate us how can we apply margin in a radiobuttonlist control. actually in this example code we will apply margin css style to a radiobuttonlist's each item.

RadioButtonList web server control have no built in property to set margin in radiobuttonlist control or each item in radiobuttonlist. so we need to take help from css style. radiobuttonlist items collection contains ListItem objects. we can attach any css style to a ListItem object using Attributes property as Attributes.CssStyle.Add(). this Add() method allow us to attach any css style by name value pair to a ListItem object.

In this example we iterate through the radiobuttonlist items collection using foreach loop and attach a margin css style to its each item. here we applied 25 pixel left and right margin for each item in a radiobuttonlist server control. in this way we can assign different margin value for different item in a radiobuttonlist. event we can apply margin for any specific item in a radiobuttonlist.

radiobuttonlist-margin.aspx


<%@ Page Language="C#" AutoEventWireup="true"%>    
      
<!DOCTYPE html>
        
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    { 
        if(!Page.IsPostBack)
        {
            RadioButtonList1.Items.Add(new ListItem("California Gnatcatcher", "1"));
            RadioButtonList1.Items.Add(new ListItem("Black-tailed Gnatcatcher", "2"));
            RadioButtonList1.Items.Add(new ListItem("White-lored Gnatcatcher", "3"));
            RadioButtonList1.Items.Add(new ListItem("Brown Creeper", "4"));
            RadioButtonList1.Items.Add(new ListItem("Eurasian Treecreeper", "5"));
        }

        foreach(ListItem li in RadioButtonList1.Items)
        {
            //add margin as css style
            li.Attributes.CssStyle.Add("margin-left", "25px");
            li.Attributes.CssStyle.Add("margin-right", "25px");
        }
    }
</script>        
        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head id="Head1" runat="server">        
    <title>asp.net radiobuttonlist margin</title>
</head>        
<body>        
    <form id="form1" runat="server">        
    <div>        
        <h2 style="color:MidnightBlue; font-style:italic;">        
            asp.net example - radiobuttonlist margin
        </h2>        
        <hr width="550" align="left" color="Gainsboro" />        
        <asp:Label       
            ID="Label1"       
            runat="server"      
            Font-Size="Large"
            Width="350"
            Text="select an item from radiobuttonlist"
            >      
        </asp:Label>      
        <br /><br />
        <asp:RadioButtonList 
            ID="RadioButtonList1"
            runat="server"
            RepeatDirection="Vertical"
            AutoPostBack="true"
            RepeatLayout="Flow"
            BorderColor="SkyBlue"
            BorderWidth="1"
            >
        </asp:RadioButtonList>  
    </div>        
    </form>        
</body>        
</html>

More asp.net examples