Margin and padding are areas inside and outside your components whose size you can configure. This automatically changes the spacing to other components and the position of your content within your page. Learn below what the differences are between both properties and what exactly you can adjust using margin and padding.
Margin
The outer area of your content is called margin. It is the enforced space between the content including its borders and the parent and child elements or neighboring elements. If you define values for Margin, the element slides up or down outside its borders (blue dashed line in the editor).
Padding
Padding describes the inner distance between the content and its own content boundary. Padding belongs to the content area and is therefore added to the size of the element. If you define values for padding, the element slides up or down within its borders (blue dashed line in the editor).
Border
Border refers to the frame around the content, including its inner space. Border encloses the content area as well as the padding.
Configuring component spacings
You can use Margin and Padding in radiosphere Studio Editor to configure the size and position of your components. To do so, click on the Design button in the top bar. On the right side in the Spacing section you can now define values for Margin and Padding. You can choose between three different types of values to define the dimensions of components. Find out here what they are. You will see four empty fields in the spacing area where you can enter values. If you don't know which field stands for what, you can read about it here. As soon as you have entered the values, the spacing of the component to other components as well as the whole page in the preview on the left side will change automatically according to the settings you have entered. You can change the settings at any time by overwriting the values in the fields.