CSS Tutorial 10: CSS Margin and padding

Within the previous lesson you had been introduced to the box model. On this lesson, we will look at how you can exchange the presentation of factors via atmosphere the margin and padding properties. CSS Margin and Padding

CSS Tutorial 10: CSS Margin and padding

  • Set the margin in an element
  • Set the padding in an element

Set the margin in an element

An element has 4 facets: right, left, high and backside. The margin is the distance from every facet to the neighboring detail (or the borders of the record). See also the diagram in lesson 9 for an illustration.

As the first illustration, we will be able to look at the way you define margins for the report itself i.E. For the aspect<body>. The illustration under suggests how we would like the margins in our pages to be.

figure011-tech-frk

The CSS code for this would look as follow:

	
	body {
		margin-top: 100px;
		margin-right: 40px;
		margin-bottom: 10px;
		margin-left: 70px;
	}
	

Or you could choose a more elegant compilation:

	
	body {
		margin: 100px 40px 10px 70px;
	}
	

That you can set the margins within the same manner on almost each aspect. For illustration, we can decide on to outline margins for all of our text paragraphs marked with<p>:

	
	body {
		margin: 100px 40px 10px 70px;
	}

	p {
		margin: 5px 50px 5px 50px;
	}
	

Set padding in an element

Padding can be understood as “filling”. This is smart as padding does not influence the space of the element to other elements however handiest defines the internal distance between the border and the content of the aspect.

The usage of padding may also be illustrated via looking at a easy example the place all headlines have history colors:

	
	h1 {
		background: yellow;
	}

	h2 {
		background: orange;
	}
	

By defining padding for the headlines, you exchange how much filling there will be around the text in each headline:

	
	h1 {
		background: yellow;
		padding: 20px 20px 20px 80px;
	}

	h2 {
		background: orange;
		padding-left:120px;
	}
	

Summary:

You are actually in your solution to master the box model in CSS. Within the next lesson, we will take a closer seem at  set borders in extraordinary colors and find out how to shape your elements.