CSS Primer for Lightning Developers: CSS Box Model with Padding, Margin and Border Properties

There are literally hundreds of properties that can be applied to the styling of HTML elements. For the sake of helping you get started with styling Lightning Components and Applications, we will focus on the most common properties and their variants to help you hit the ground running with CSS styling.

CSS Box Model

While the CSS box model is not itself a property, knowing how the box model works is essential to understanding how many CSS properties are applied to the styling of HTML elements.

In a nutshell, you can think of each HTML element as a rectangular box. Most of our focus with CSS properties is to define how large the box is, where it is positioned on the page, and how it is formatted.

The box model consists of four distinct parts:

  • Content – The area containing the actual content of an HTML element.
  • Padding – A transparent area that creates space around the content but within the border of the element.
  • Border – The boundary lines of the element that surround the content and its padding.
  • Margin – A transparent area that creates space outside of the border that separates an element from other elements around it.
CSS Box Model
CSS Box Model

Width and Height

There are a number of properties related to defining the width and height of elements.

Properties related to width include:

  • width – Specifies the width of an element
  • max-width – Specifies the maximum width of an element
  • min-width – Specifies the minimum width of an element
  • line-width – Specifies the line width of an element

Properties related to height include:

  • height – Specifies the height of an element
  • max-height – Specifies the maximum height of an element
  • min-height – Specifies the minimum height of an element
  • line-height – Specifies the line height of an element

Width and height properties are defined by values expressed as either absolute or relative units of measure. CSS measurement units are covered in another post.

Padding and Margin

Padding and margin properties are similar in that they are used to create spacing between elements, but how they apply that spacing is fundamentally different.

Padding properties create space around an element, serving as a buffer between the content and the border of the element. Margin properties affect the spacing outside of the border, determining the space between the element and its neighbors in the HTML document.

Padding

Thinking in terms of the CSS box model, padding creates empty space around your content, within the border of an element.

There are CSS properties for setting the padding of each side of an element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
CSS Box Model - Padding
CSS Box Model – Padding

Padding properties can be defined with one of three value types:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – The padding will be inherited from the parent of this element

For example, to set the padding on all four sides of a <div> element:


div {

    padding-top: 50px;

    padding-right: 25px;

    padding-bottom: 50px;

    padding-left: 25px;

}

There is also a shorthand property called padding that consolidates all four of the individual padding properties into one.

The padding property is dynamic and can take one, two, three or four values.

When four values are specified for padding, the values are applied to each side of an element clockwise from the top. Each value is separated by a space.

For example, if we use the following shorthand:


div {

    padding: 10px 20px 30px 40px;

}

The padding will be applied as follows:

  • Top (12:00) – The top padding will be 10px
  • Right (3:00) – The right padding will be 20px
  • Bottom (6:00) – The bottom padding will be 30px
  • Left (9:00) – The left padding will be 40px

If three values are specified for padding, the second value specifies both the right and left padding.

For example, if we use the following three values:


div {

    padding: 10px 20px 30px;

}

The padding will be applied as follows:

  • The top padding will be 10px
  • The right and left padding will be 20px
  • The bottom padding will be 30px

If two values are specified for padding, the first value specifies the top and bottom padding, and the second value specifies the right and left padding.

For example, if we use the following two values:


div {

    padding: 10px 20px;

}

The padding will be applied as follows:

  • The top and bottom padding will be 10px
  • The right and left padding will be 20px

If only one value is specified for padding, the value is applied equally to all four sides of the element.

For example, if we use the following value:


div {

    padding: 10px;

}

The padding will be applied as follows:

  • The top padding will be 10px
  • The right padding will be 10px
  • The bottom padding will be 10px
  • The left padding will be 10px

Margin

While padding creates empty space around content but within the border of an element, the margin creates empty space outside of the border.

Margin is used to apply spacing between elements, separating neighboring elements from each other.

Similar to padding, there are also CSS properties for setting the margin of each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
CSS Box Model - Margin
CSS Box Model – Margin

Margin properties can be defined with one of four value types:

  • auto – The browser is responsible for calculating the margin
  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem
  • % – A value expressed in terms of the percentage of the containing element
  • inherit – The margin will be inherited from the parent of this element

If you set the margin-right and margin-left properties to auto, the browser will calculate the space remaining to the right and left and horizontally align an element within its container!

Unlike padding, the margin property accepts negative values for length.

For example, to set the margin on all four sides of a <p> element:


p {

    margin-top: 5px;

    margin-right: 10px;

    margin-bottom: 15px;

    margin-left: 10px;

}

As was the case with padding, there is also a shorthand property for margin that works in the same manner. Using the single margin property can be used to apply top, right, bottom and left margin, and the values are applied clockwise from the top.

For example, if we use the following shorthand:


p {

    margin: 5px 10px 15px 20px;

}

The margin will be applied as follows:

  • Top (12:00) – The top margin will be 5px
  • Right (3:00) – The right margin will be 10px
  • Bottom (6:00) – The bottom margin will be 15px
  • Left (9:00) – The left margin will be 20px

If three values are specified for margin, the second value consolidates the right and left margin.

For example, if we use the following three values:


p {

    margin: 5px 10px 15px;

}

The margin will be applied as follows:

  • The top margin will be 5px
  • The right and left margin will be 10px
  • The bottom margin will be 15px

If two values are specified for padding, the first value consolidates the top and bottom margin, and the second value consolidates the right and left margin.

For example, if we use the following two values:


p {

    padding: 5px 10px;

}

The margin will be applied as follows:

  • The top and bottom margin will be 5px
  • The right and left margin will be 10px

And like padding, if a single value is provided for margin it will be applied to all four sides of the element. For example:


p {

    margin: 5px;

}

The margin will be applied as follows:

  • The top margin will be 5px
  • The right margin will be 5px
  • The bottom margin will be 5px
  • The left margin will be 5px

Borders

There are a number of properties that you can use to style the border of an HTML element.

CSS Box Model - Border
CSS Box Model – Border

Border properties include:

  • border-style
  • border-color
  • border-width
  • border-radius

border-style

The border-style property specifies the type of border to be displayed on one or more sides of an element.

Possible values for border-style include:

  • solid – Displays a solid border
  • double – Displays a double border
  • dashed – Displays a dashed border
  • dotted – Displays a dotted border
  • ridge – Displays a ridged 3D border
  • groove – Displays a grooved 3D border
  • inset – Displays an inset 3D border
  • outset – Displays an outset 3D border
  • hidden – Defines a border, but the display is hidden
  • none – Specifies that no border is defined
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-color

The border-color property specifies the color of a border. This property will not be applied unless a value for the border-style property has been defined.

Possible values for border-color include:

  • A supported color name such as red, green, or blue
  • An RGB value such as rgb(255,0,0), rgb(0,255,0), or rgb(0,0,255)
  • A hexadecimal value such as #ff0000, #00ff00, or #0000ff
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-width

The border-width property specifies the width of a border. This property will not be applied unless a value for the border-style property has been defined.

Possible values for border-width include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem.
  • thin – Displays a thin border
  • medium – Displays a medium border. This is the default value.
  • thick – Displays a thick border
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default

border-radius

The border-radius property was introduced in CSS3 and is can be used to specify the amount of rounding to apply to the corners of an element.

Possible values for border-radius include:

  • length – A numeric value expressed as an absolute or relative measurement unit such as px, pt, em, or rem.
  • % – A percentage value
  • inherit – Inherits the background-attachment value from the parent element
  • initial – Sets the background-attachment value to its default
Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply