How to manipulate elements using Accordion tools - Margin & Padding

Locating and Manipulating Margin and Padding

Margin and padding can be accessed and adjusted using the accordion tools for any element, container or block.

1._Margin_and_Padding.gif

 

Margin and padding can be set in a variety of both relative (%) and absolute (px) units. It is possible to set a different unit for each side of an element. To change the unit, click on it to launch a drop down menu displaying all available options.

2._Margin_and_Padding.gif


The values can be uniformly adjusted for all sides of an element at once, in increments of one, by clicking the plus or minus buttons.

3._Margin_and_Padding.gif


Margin vs. Padding

Both margin and padding are used to position an element by manipulating whitespace. So, what’s the difference? In many cases, both properties can seemingly be used interchangeably to create the same visual result. However, there is a difference, and understanding that difference is an important step in building better, scalable blocks.

Margin controls the space around an element while padding controls the space within an element. The difference between margin and padding is most easily seen when an element has an assigned background color or a border treatment, like a button, which almost always requires both padding and margin. Margin controls how far away the button is from other elements. Padding controls the space inside the button, and not only provides buffering room between the text and the border or edge, but it also increases the amount of clickable real-estate.

Compare elements on a page to a series of framed photographs on a wall: the wall is the viewport or browser window, the framed photos are elements where the content is the photo itself, the matting around the photo is the padding, the frame is the border, and, lastly, the space between the framed photographs is the margin. To increase the space between the framed photos, increase their margins. There is a finite amount of wall space, and the total width of all the elements and their respective marginal values cannot exceed that amount. To increase the space between the frame and the photo, increase the amount of “matting” or padding. As the value of the padding increases, the photo or content size decreases, in order to fit everything within the same size frame.

This is one of the major reasons our preferred unit for positioning is percentages. That “finite” amount of wall space, the browser size, isn’t so finite in practice, but instead varies for every user. Setting margin and padding in absolute values like pixels does not guarantee that our design will look its best at every size. Setting margin and padding in percentages allows those values to scale fluidly with respect to the browser size.

Keep it Simple

Blocks that contain several elements should apply general padding, the space between the elements and the edge of block, globally on the block-level or an organizational container. This allows the padding to be edited at-once, instead of element-by-element, making it faster and easier to create and maintain a consistent design.

Collapsed Margins

Margins, unlike padding, are not considered part of an element. Because of this, their calculated value is a little more flexible, and adapts to special situations, like an element’s alignment type. Block-level elements, or elements that vertically stack on top of one another, will merge or collapse their adjacent vertical margins. This behavior is designed to maintain vertical rhythm by preventing margins from doubling between elements. Let’s consider an example for further clarity:

Screen_Shot_2017-03-27_at_5.05.47_PM.png


Both elements A and B are block-level elements. Element A has a bottom margin of 5% and element B has a top margin of 10%. What’s the calculated space between these two elements? The logical assumption, adding the two values together for a total of 15%, is actually incorrect. Instead, the greater of the two values will take precedence, and the lower value will collapse to zero. The calculated space between elements A and B is actually 10%. This behavior is best utilized when building layouts that require a series of equally spaced blocks or elements.

Screen_Shot_2017-03-27_at_5.06.49_PM.png

In the example above, the blocks are evenly spaced with 10% margin between each block. The blocks also maintain a 10% margin from the top and bottom edges of the browser window. Without collapsible margins, the space between blocks would double to 20%. With collapsible margins, the blocks can be arranged in any order, and still maintain that consistent 10% margin. The collapsing behavior can be avoided by setting the alignment to “inline-block” instead of “block”, inline-block elements will honor all margin and padding values.

Was this article helpful?
0 out of 0 found this helpful