Mac SEO Blog

The latest release of EverWeb, version 4.4, is full of new, easy to use, but highly effective features that will add a new dimension to your website’s design. The addition of the new Padding and Margins feature is a case in point. It is simple to use but gives you greater flexibility than ever before when it comes to working with objects such as TextBoxes, images, Containers and a variety of widgets.

Margins and Padding Before EverWeb 4.4

Before the launch of EverWeb 4.4 you were limited in the use of margins and padding options within the pages of your site. You could add left and right margins to full width objects using the Size section of the Metrics Inspector. Additionally, some of EverWeb’s built in widgets also featured some options to control margins and padding. The most notable widget in this respect is the Navigation Bar widget where you have padding and spacing for menu options. The FlexBox, Text Sections and the Responsive Row widget all feature some of these features as well.

With the advent of EverWeb 4.4, padding and margins becomes a universal feature for all objects in your site.

EverWeb’s New Padding and Margins Feature…

The introduction of universal margins and padding in EverWeb 4.4 has led to the reorganisation of the Metrics Inspector. The Left and Right Margins fields in the Size section have disappeared, replaced by the brand new Margins & Padding section. If you have used the margins features of previous EverWeb versions, these settings will be preserved in the new Margins and Padding section. Also, if you have used the margin and padding features found in widgets, these will be unaffected.

The new Margins & Padding section of the Metrics Inspector uses a visual representation of an object. The rectangle has a set of fields on each of its sides, both inside and outside of it. The four fields inside the rectangle represent Padding whilst the fields outside of the rectangle represent Margins. You can apply margins and/or padding to any, or all sides, of an object as required. When you do so, you will see this displayed on the object in the Editor Window.

As already mentioned, padding applies spacing within an object. Typically this will only be useful for adding space to text within a TextBox or Container, and in an image when you have added text on top of the image. When using padding, you will see a dashed line displayed on the inner side of the object you are applying the padding to. When you add a Container to the page, you will see that a 20 pixel padding is applied automatically to all sides of the object.

Whilst padding applies to the inside of an object, margins apply to the outside sides of an object. When applying margins, you will see a grid pattern displayed on the side of the object that you have applied the margin to.

Margins & Padding in Practice

You can use Margins and Padding to objects in both fixed width and responsive pages in your website. Whilst useful for both page types, margins and padding are perhaps more beneficial for those using Responsive pages. Margins are especially useful when used with containers such as the Responsive Row widget and Containers. You can now space fixed width objects out within these object types as you want. You also gain vertical control over objects in these container types as well. In this way you will be able to have objects displayed at different heights within Responsive Rows or Containers.

When using margins on full width objects, they also become a good way to create page margins, which is especially useful when displaying your site on mobile devices where you do not want your content to be edge-to-edge on screen.

Margins and Padding are a very easy visual way to help with your page design in EverWeb!