TECHNICAL BLOG

Margins

Margins are used to create space around separate elements, outside of any defined borders. This is a bit like social distancing between two people! There is a margin of 10px around each of these images.

It might look like this in your HTML/CSS code:

img { margin: 10px; }

 

Borders

Borders wrap around the content and the padding. Just like a photo frame containing a picture inside. CSS allows you to specify the style, width, and color of an element's border such as the border in this example.

It might look like this in your HTML/CSS code:

p { border-style: dotted; border-width: 2px; }

 

Padding

Padding is used to create space around an element's content, occurring inside of the borders. Just like a protective cushion around the content. Typically used with buttons, as in the space around the word BUTTON in this example.

BUTTON

The CSS Box Model

HTML elements can be thought of as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Box Model Parts:

The box model shows us visually how a border wraps around elements, and defines the space between elements.

• Margin: The area outside the border. The margin is transparent.
• Border: The edge, like a line that goes around the padding.
• Padding: The area around the content, within the border. The padding is transparent.
• Content: The innermost part of the box model. This is where text and images appear.

Bonus! Watch @media queries in action by resizing this window or switching your device, and watching the Box Model!

 

JavaScript & The DOM ›