In this content, we learn how to set the padding between elements. Padding determines the distance from the inner edge of the element to the outer line and is critical for page layout. Custom padding values are added to the element via the Styling panel; use the lock icon to apply the same value to all edges. You can also save a style for reuse in a project. Ready-made padding styles include various padding values that come by default for elements, for example Row and Column elements have 8 pixels, Button element has different padding values. Defined styles make Layout editing easier and provide a style for every scenario. With this knowledge, you can effectively manage spacing in your designs.
In this learning content, we will learn how to define paddings between elements.
The padding values you will use while designing are an important element in the formation of the page layout. Padding controls the internal space between the element and the border.
Now, let's take a step-by-step look at how to add the same or different padding values to elements.
We learned how to add the Padding value.
Let's save the style we added to use the same padding style on different screens within the project.
We have created a new padding style with Custom Style. Now, let's examine the values of the defined spacing styles and in which elements they can be used.
You can find ready-made padding styles in the Layout section. There are 9 ready-made styles in Layout. 8 of these 9 styles have padding values.
Let's examine them now.
You can find ready-made padding styles in the Layout section. There are 9 ready-made styles in Layout. 8 of these 9 styles have padding values.
When you add the row element to the screen with drag and drop, it comes with the row style by default. This default style has a padding value of 8 pixels from top, right, bottom and left.
This is the default style that comes by default in the columns of the Row element. This default style has a padding value of 8 pixels from top, right, bottom and left.
It is a style defined for the Button element. This style comes with values of 8 pixels from top and bottom and 16 pixels from right and left.
When you add the Image element to the screen with drag and drop, the Image style is not defined by default. You can add it from the Layout section. In this style, 0 pixel padding value is defined from top, right, bottom and left.
When you drag and drop any of the Location search, text input, number input, email, text area, currency, password, percent, url, auto complete, selectbox, multiselect elements under the Input category, the Input style comes by default. This default style has a padding value of 8 pixels from top, right, bottom and left.
Some elements come with none style when you add them to the screen with drag and drop. None style is a default style that you can use in scenarios where you don't want any padding between the element and the border. This default style has a padding value of 0 pixels from top, right, bottom and left.
It is a ready-made style that you can use in scenarios where you want 8 pixels of padding in four directions between the element and the border.
When you add the Table element to the screen, it comes with this style. This default style has a padding value of 0 pixels from top, right, bottom and left.
We have reviewed the defined padding styles in detail. Now you are ready to work with paddings.
