Creating borders and space with CSS

Creating borders and space with CSS: We can also use CSS properties to create borders and space around our HTML elements. To create a border around a HTML element, you have to use the border CSS property and set the values to the width, style and colour you want. Let’s look at an example:

<body>
 <div style="border: 4px solid green; width: 50%; height: 100px;"> <!--Here we are using border property, width, style and color. -->
 Hello World. Writting webpages can be fun.
 </div>
</body>

Sample output of above code:


Hello World. Writting webpages can be fun.

 

We can also change how much space there is inside a HTML element by using the padding and margin CSS properties. You can set the values for the margin and padding at the top, bottom, left and right of a HTML element. Let’s take a look:

 

<body>
 <div style="padding: 10px; margin: 50px; border: 4px solid blue;
 width: 50%; height: 100px;">
 Hello World. I am learning<br/>
 about CSS padding, margins, and borders.
 </div>
</body>

Sample output of above code:

Hello World. I am learning
about CSS padding, margins, and borders.

 

Here the padding CSS property creates 10px of space between the border of our < div > and the text inside the < div >. The margin CSS property creates 50px of space between the border of our < div > and the edge of the page.

The style of our border has been set to the value of solid. You can also use dotted, dashed or double as values. Below is an example of dotted border.

<body>
 <div style="padding: 10px; margin: 50px; border: 4px dotted blue;
 width: 50%; height: 100px;">
 Hello World. I am learning<br/>
 about CSS padding, margins, and borders.
 </div>
</body>

Sample output of above code: dotted border

Hello World. I am learning
about CSS padding, margins, and borders.

Related Posts: (Learn More)

W3SCHOOLS – CSS border spacing property.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.