# Layout Structure

Telerik Presentation Foundation layout follows the [W3C](http://www.w3.org/)[box model](http://www.w3.org/TR/REC-CSS2/box.html) standard. The diagram below shows the basic structure and naming conventions of the box model.

![Telerik UI for WinForms Telerik Presentation Framework box model diagram showing content, padding, border, and margin](https://www.telerik.com/products/winforms/documentation/assets/71dd3aafa66fef32b7a64144a580add1/structure001.png)

## Content Area

Content is the rectangular area where an element renders itself and places child elements. The RadElement **FieldSize** property provides the size of the content area.

## Padding

Padding is a rectangular area that surrounds the content rectangle and is typically filled with the background of the content area. The RadElement **Padding** property provides the rectangle dimensions, includes helper functions to perform math on two Padding objects (adding and subtracting) and has dimension properties for each side of the rectangle. Padding properties **Vertical** and **Horizontal** provide the sum of top/bottom, left/right padding areas.

## Border

The border of an element is typically rendered by a [BorderPrimitive](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/primitives/borderprimitive) child of the element. The RadElement **BorderThickness** property determines the area that is given for border rendering.

## Margin

Margin is the area outside an element. Margin affects the spacing between elements. For example, if an element with a non-zero left margin is next to an element with a non-zero right margin, the total margins is the sum of the two fields as shown in the figure below. Margins are always transparent. The RadElement \_\_Margin__property is a Padding type and represents the rectangle dimensions. In the example below the control on the left has no margins. The control on the right has ten pixel margins.

![Telerik UI for WinForms Telerik Presentation Framework margin comparison for controls with and without margins](https://www.telerik.com/products/winforms/documentation/assets/3f172ce589bad1c7706e37fffaff8d46/structure002.png)

#### Two elements with margins

 

 

```C#
public class LayoutStructure : RadElement
{
    protected override void CreateChildElements()
    {
        StackLayoutPanel layoutPanel = new StackLayoutPanel();
        RadTextBoxElement text1 = new RadTextBoxElement();
        text1.ForeColor = Color.Red;
        text1.ShowBorder = true;
        text1.MinSize = new Size(60, 0);
        text1.Text = "Element 1";
        // Add twenty pixel margin
        text1.Margin = new Padding(20);
        RadTextBoxElement text2 = new RadTextBoxElement();
        text2.ForeColor = Color.Blue;
        text2.ShowBorder = true;
        text2.MinSize = new Size(60, 0);
        text2.Text = "Element 2";
        // Add twenty pixel margin
        text2.Margin = new Padding(20);
        layoutPanel.Children.Add(text1);
        layoutPanel.Children.Add(text2);
        this.Children.Add(layoutPanel);
        base.CreateChildElements();
    }
}

```

```VB.NET
Public Class LayoutStructure
    Inherits RadElement
    Protected Overrides Sub CreateChildElements()
        Dim layoutPanel As New StackLayoutPanel()
        Dim text1 As New RadTextBoxElement()
        text1.ForeColor = Color.Red
        text1.ShowBorder = True
        text1.MinSize = New Size(60, 0)
        text1.Text = "Element 1"
        ' Add twenty pixel margin
        text1.Margin = New Padding(20)
        Dim text2 As New RadTextBoxElement()
        text2.ForeColor = Color.Blue
        text2.ShowBorder = True
        text2.MinSize = New Size(60, 0)
        text2.Text = "Element 2"
        ' Add twenty pixel margin
        text2.Margin = New Padding(20)
        layoutPanel.Children.Add(text1)
        layoutPanel.Children.Add(text2)
        Me.Children.Add(layoutPanel)
        MyBase.CreateChildElements()
    End Sub
End Class

```



## See Also

* [Clipping](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/clipping)

* [Custom Layouts](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/custom-layouts)

* [Element Offset Calculations](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/element-offset-calculations)

* [Layout Activation](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/layout-activation)

* [Layout Logic](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/layout-logic)

* [Layout Overview](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/layout-overview)

* [RadControl Testing Considerations](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/radcontrol-testing-considerations)

* [Sample Arrange Stage Scenarios](https://www.telerik.com/products/winforms/documentation/telerik-presentation-framework/layout/sample-arrange-stage-scenarios)