Open the right tab

To adjust the dimensions or white spaces, first click on the element that you want to adjust. In the right menu click on the tab for dimensions and white spaces. You can recognize them by the four arrows in a square (see figure).

Adjust the width and height

In the tab you will see the width and height section. Underneath there are two fields: the width and height. In most cases these are set to auto. In that case, the element adapts to the content and the available space.

If you want to set the height or width, use these fields. The element adjusts immediately while you enter the values. This makes it easy to play with the sizes until it looks just right.

Next to the numbers you can select the unit type. The default is px, but you can choose any other if it suits your pupose. More about these units in the article about unit types in web design.

Adjust white spaces (paddings)

In the tab you see under the width and height a frame with two frames in it. In the inner frame you can set the white spaces (paddings). The four settings for the white spaces are shown in red in the accompanying figure. You can set the white spaces in the top, bottom, left and right of the element separately.

Enter a value, and you will see the whitespace appear immediately in the element that you are editing. If you do not set a value, the value automatically switches to "auto". To ensure that no white space is shown, you must manually set it to 0 (zero).

By default, the white spaces are defined in pixels. To adjust this, click on the "px" and a fold-out appears in which you can choose another unit.

Adjust margins

In addition to the white spaces within your element, you can also adjust the margins outside your element. The 4 fields that control these margins are outlined red in the accompanying figure.

Enter a value, and you will see the spaces appear immediately next to the element that you are editing. To ensure these margins apear, the element will probably shift or become smaller. If you do not set a value, the value automatically switches to "auto". To ensure that no margins are shown, you have to set them manually to 0 (zero).

By default, the margins are defined in pixels. To adjust this, click on the "px" and a fold-out appears in which you can choose another unit.

Set the positioning of your element

Within Webanizr you have three options when it comes to how your element is placed. These are displayed as 3 icons. The options are:

• Next to or under other elements: The element is placed next to or under the other elements, depending on where where enough space is available.
• Exact position within the surrounding element. Once this position has been established, the element will no longer shift, even if other elements are added. Note that option does not always work responsive.
• Exact position on the screen.. This determines where on the screen the element is placed. Even if the page is scrolled, this element will not moving.