Introduction to Interface Design in Kuika

Definition of Paddings

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.

  1. Select the element you want to add padding to.
  2. From the styling panel, go to the padding field.
  3. Enter the padding values you want to add.
  4. If you want to enter the same value from top, right, bottom and left, enter the desired value in the top field and click the lock icon on the left.

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.

  1. Select the element you added padding to.
  2. Click on the dot dot dot dot icon in the Layout panel.
  3. Select Save as style.
  4. Type the style name and save it.

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.

Defined Padding Styles

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.

Row

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.

Column

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.

Button

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.

Image

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.

Input

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.

None

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.

Padding

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.

Table

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.