Css

The margin & padding properties are efficient tools which allow us to control spaces.
They're used for both sizing up and positioning elements.
Let's see these properties in action.

Start Reading ;

The margin & padding properties

Controlling spaces is the most important technique in every aspect of life.
In CSS, controlling spaces help us to quickly size up and position elements.

space

There are some properties are used to control spaces inside and around containers:

  • padding properties - control spaces inside containers
  • margin properties - control spaces around containers

The padding properties

Generally, there are 4 of padding properties:

  • padding-top | distance between top edge of the container and its content
  • padding-right | distance between right edge of the container and its content
  • padding-bottom | distance between bottom edge of the container and its content
  • padding-left | distance between left edge of the container and its content

In the tutorial about Container Types, we’ve created some look-like-button links using width and height properties. Using width and height properties to specify size of those buttons has some drawbacks that we have to change CSS code to adapt to certain text and we also need to write some more rules to center text.

padding properties can help us to simply the tasks: both sizing up elements and centering text.

HTML code:

CSS code:

Result:

See the Pen Space by Kei Nart (@codenart) on CodePen.

There is a short form of padding properties which can help us to specify the 4 values in a single line of code. The 4 values are placed in order: top, right, bottom, left. (clockwise)

padding: 15px 36px 15px 36px;

Another short form with only three values, the first value is for top, the second one is for right/left and the last value is for bottom:

padding: 15px 36px 15px;

We can also use the short form with only two values, the first value is for top/bottom and the second one is for right/left:

padding: 15px 36px;

If our purpose is to set 4 padding properties with the same value, we can write only one value in short form like this:

padding: 15px;

The margin properties

As the padding properties help us to control spaces inside containers, they’re commonly used to size elements up and align content.

On the other hand, the margin properties help us to control spaces around containers; They’re commonly used to position containers (elements):

  • margin-top | the minimum distance from top edge of the container
    to other elements; or to top edge of parent container
  • margin-right | the minimum distance from right edge of the container
    to other elements; or to right edge of parent container
  • margin-bottom | the minimum distance from bottom edge of the container
    to other elements; or to bottom edge of parent container
  • margin-left | the minimum distance between left edge of the container
    to other elements; or left edge of parent container

The margin properties can also be written in short form as padding properties.

Let’s write some CSS code. We’re gonna make use of the previous example. This time. we will create some space around buttons.

CSS code:

Result:

See the Pen Outer Space by Kei Nart (@codenart) on CodePen.

The auto value

Here we meet it again, the auto value. It is commonly used with margin properties to quickly positioning elements. The example below will demonstrate how to center an element or align it to the right.

HTML code:

CSS code:

Result:

See the Pen Automa-g-ic by Kei Nart (@codenart) on CodePen.

For the first square, my purpose is to horizontally center it by creating some spaces on the left and the right; But, I was lazy enough to avoid making some calculations. So, I just let web browsers take care of the task. I’ve found that it just works. And I decided to apply the same method for the second square. :D

The best thing about this approach is web browsers will keep track of the elements all the time and re-calculate the value if something happens. You can try it on your web browser and resize browser window to see how cool it is. Sizes of spaces will be automatically adjusted. The first square will keep being centered and the second square will keep being aligned to the right.

In the next tutorial, we’ll get to know media query syntax which allows us to write CSS code for each certain screen sizes. And we’ll create a real navigation bar which is responsive and toggleable on mobile device.

Next: Media Query ;