Padding and Margin

 

The difference between margin and padding

Margin and Padding both refer to blank space between elements. They might seem to be the same thing, however, there is a difference which may affect your design decisions.

 

N.B in the following descriptions an element refers to a cell, section or image etc..

 

Padding

Padding is the space that’s inside the element between the element and the element border or edge, if no border is applied. You can apply different padding amounts to each side of an element.

 

Margin

Margin is the space between the element border and the parent element and all siblings. The space outside the border between it and the other elements is the margin. Just like padding, it's possible to target all four sides of an element to change it's margin.

 

The easiest way to understand the difference between margin and padding is through an image. The image below demonstrates what each part of something like a cell containing a paragraph  looks like. 

 

Image

 

Padding and Margin in use

It's usually easiest to simply use padding when building a Sketchanet site. A case point where you may need to use margin is with an inline image surrounded by text. The image requires some margin  (in this case on the right and bottom) in order to push the text away from the edges of the image.  The image below demonstrates this:

 

 

ImageLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum facilisis diam non ullamcorper. Curabitur erat diam, tincidunt at enim sed, scelerisque semper odio. Pellentesque dapibus mauris vel rhoncus vulputate. Cras condimentum sapien ut lorem rutrum sollicitudin. Nullam a feugiat lectus. Sed quis ullamcorper nunc. Sed ligula leo, maximus in augue eget, varius pretium ipsum. Aliquam ornare convallis lacus. Donec id vehicula nulla. Nullam pharetra metus sit amet sapien condimentum tincidunt. Nullam tincidunt velit vel elit egestas, eget sagittis felis malesuada. Etiam justo purus, ultricies in aliquet vitae, luctus non turpis. Sed suscipit mauris porttitor sapien porta eleifend. Aliquam tincidunt turpis sed lorem dignissim, ac faucibus quam accumsan. Integer suscipit tortor at nisi euismod consequat. Aliquam at diam nisi. Pellentesque luctus tellus ut lacus pretium, fermentum luctus risus porttitor. Maecenas elit diam, iaculis ut dapibus vitae, fermentum eu mauris. Proin eu volutpat nisl. Pellentesque risus massa, tempor eget eros sed, pellentesque tristique augue. Pellentesque imperdiet felis eget tristique dapibus. Mauris hendrerit pellentesque purus sit amet euismod. Vivamus non nisi non elit porttitor congue eget vel tellus. Maecenas ante magna, ultricies et lacus eu, dignissim sollicitudin sapien. Nulla euismod leo in felis egestas, in facilisis odio tincidunt. Maecenas suscipit pulvinar arcu non porta.