Friday, March 29, 2024

CSS Borders, Padding & Margins

The CSS Box model is essentially a rectangular box model that is used on sites to manipulate design and appearance, ranging from margins, borders, padding and content. These properties are relevant to the CSS Box:

  • Margin: by establishing a margin a free space is created around some element, thus eliminating the elements in the area outside the border; the margin is transparent
  • Borders: represents the edge of a CSS box, which extends around the pudding and the content, the margin is 0, being invisible, but it is possible to set the style, thickness or color of the border
  • Padding: is the lower edge of the CSS box, namely the outer edge of the content box and the edge of the edge of the border; the transparency is transparent
  • Content: is the content of the CSS box, where both the images and the text are inserted

We use the properties height and weight to set the size of an item so it can be rendered correctly in all browsers. It is very important to know how to set them, because inside the content is the text, pictures, tables and other items representative of nested child items.

Here’s an example of the above:

<html>
   <head>
     <meta charset="UTF-8">
     <style type="text/css">
.ex1 {
  width:300px;
  background-color: DarkSalmon;
  padding:0px;
  border:0px;
  margin:0px; }
.ex2 {
  width:300px;
  background-color: DarkSalmon;
  padding:10px;
  border:5px solid brown;
  margin:30px; }
.ex3 {
  width:300px;
  padding:0px 4px 50px 120px;
  margin: -28px 0px -10px 100px;
  background: DarkSalmon;
  border-top: 1px solid #000;
  border-right: 4px dashed brown;
  border-bottom: 8px double yellow;
  border-left: 16px inset purple; }
 </style>
</head>
<body>
<h1>CSS Box Model</h1>
<p class="ex1">the first example</p>
<p class="ex2">the second example</p>
<br></br>
<p class="ex3">the third example</p>
</body>
</html>

CSS Margin

Through these properties, we can create a space around the elements, pushing upwards against other cassettes. Individual properties, which give us complete control over the margins: the left edge, the right edge, the top edge and the lower edge.

Values: <length>, <percentage>, <auto>, {1,4}, inherit

Margin – single side style

We can use the margin specifying property for each element: margin-left, margin-right, margin-top, margin-bottom. These properties can have the following values: auto, length, percent, initially and inherit. Attention! negative values are not preconditions.

Example:

<html>
<head>
<style>
div {
    border: 12px solid bisque;
    padding: 20px 40px 60px 30px;
    background-color: Darksalmon;
    margin-top: 30px;
    margin-right: 50px;
    margin-bottom: 40px;
    margin-left: 30px;
    font-size: 25px;
</style>
</head>
<body>
<h1>The margin property </h1>
<div> The margin property</div>
</body>
</html>

CSS Borders

As I have already said, the edge of a CSS box extends around padding and content. The property allows you to set the border color of an element, width and style. These can be divided into many properties:

  • Border-top, border-right, border-bottom, border-left (set the style, thickness, and color of a portion of the edge)
  • Border-style, border-color, border-width (set the style, thickness or color individually, but for all four sides of the border)
  • Border-top-width, border-top-style, border-top-color (individually set one of the three properties of one side of the edge)

Borders with style

Values: none, solid, dotted, hidden, dashed, double, ridge, groove, inset, outset

Borders with color

This color property allows us to set the color of the four curves. The color can be set as follows: rgb (mention rgb values in the palette), name (mention any color name in the palette), hex (a hexagonal value) and transparency.

Values: color, transparent, {1,4}

Border widths

This property specifies the width of the edges. The property can be set as pixels, cm, pt, ems using the three default values: thin, medium or thick.

Values: thin, medium, thick, length

Borders – single side style

You can set a different border style for just one side, or more. So, there is this property to specify the pattern of each border: border-left-style, border-right-style, border-top-style, border-bottom-style

Values: dotted, dashed, solid, double, groove, inset, outset, none

In the example below, we will use several types of values:

<html>
<head>
	<style>
		body {
			font-size: 60%;
			color: grey; 
			margin: 5;
			padding: 5;
		}
	    p {
			padding: 3em;
			margin: 1em;
		}
		code {
			font: 1em/1.5 Courier;
		}
	
		#ex1 {	
			border: 1px solid;
			}
		#ex2 {
			border: 1px dotted;
		}
		#ex3 {
			border: 2px dashed #ccc;
		}
		#ex4 {
			border: solid;
			border-width: 2px 6px 12px 18px;
		}
		#ex5 {
			border: 5px;
			border-style: solid dotted dashed solid;
		}
		#ex6 {
			border: 5px solid;
			border-color: black darksalmon darksalmon darksalmon;
		}
		#borderCollie {
			border: 4px dotted #06c;
		}
	</style>
</head>
<body>
	<p id="ex1"><code>SOLID </code></p>
	<p id="ex2"><code>DOTTED </code></p>
	<p id="ex3"><code>DASHED </code></p>
	<p id="ex4"><code>SOLID - with 2px 6px 12px 18px  <br>
				 </code></p>
	<p id="ex5"><code>SOLID DOTTED DASHED SOLID <br>
				 </code></p>
	<p id="ex6"><code>SOLID - with black darksalmon darksalmon darksalmon  <br>
				 </code></p>
</body>
</html>

CSS Padding

Outside the content area of any element, we find the lining that is between the contents and any borders. To set the lining, we use the filler property.

Values: <length>, <percent>, {1,4}

Padding – single side style

We can use the property to specify the lining for each part of an element: padding-left, padding-right, padding-top, padding-bottom. To fill, we can use the following values: length, inherit and percentage. Attention! negative values are not allowed.

Here an example:

<html>
<head>
<style>
div {
    border: 5px solid brown;
    padding: 20px 40px 60px 90px;
    background-color: Darksalmon;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 60px;
    padding-left: 90px;
    font-size: 30px;
</style>
</head>
<body>
<h1>The padding property</h1>
<div> The padding property</div>
</body>
</html>

CSS Outlines

The contour of a CSS box looks like a border, but it is not part of the box. Practically, it behaves like a border, but it is sketched on the top of the box without moving to the size of the box. This line is drawn around the elements, beyond borders. It has the following contour properties: outline-width, outline-color, outline-style, outline-offset.

Outline width

This property of the contour width determines the contour width, having the following values: <length>, <thin>, <thick>, <medium>.

Outline color

With this property, the outline-color, we can set the contour color. It can be set by the following: rgb (mention rgb values in the palette), name (mention any color name in the palette), hex (a hexagonal value) and invert (a color reversal is performed).

Values: <color>, invert, inherit

Outline style

This property, the outline-style, defines the sketch style through its own values.

Values: auto, solid, dotted, dashed, groove, inset, outset, ridge, none

In the example below, we will use several types of values :

<html>
<head>
	<style>
		body {
			margin: 10px;
			padding: 15px;
		}
		h1 {
			font-size: 30px;
		}
		pre {
			padding: 30px;
			border: 10px double;
			outline: 10px solid bisque;
			margin: 30px 0;
		}
		p {
			font-size: 25px;
			outline-color: greenyellow;
			outline-style: dashed;
			outline-width: thick;
			margin: 50px 0;
		}
		p b {
			outline: 6px dotted bisque;
		}
		</style>
</head>
<body>
<h1>CSS outlines</h1>
<pre><code>CSS outlines</code></pre>
<p>The contour of a CSS box looks like a border, but it is not part of the box. 
<br><br><b>Basically, he behaves like a border, but is sketched on the top of the box, without looking at the size of the box. </b></p>
</body>
</html>

Conclusion

During this article, you have seen how to use padding, borders and outlines in CSS.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured