Approx. read time: 1.8 min.
Post: 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:
[css] <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>[/css]
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:
[css] <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>[/css]
Sample output of above code:
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.
[css] <body>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.
<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>[/css]
Sample output of above code: dotted border
about CSS padding, margins, and borders.
Related Posts: (Learn More)
Related Posts
About the Author: Bernard Aybout (Virii8)
