Page Layout

One of the most important aspects of web design is making sure that the actual page layout of your website is well-structured and easy to navigate. There are many different layout techniques that you can use to organise the content on your website and make it more appealing for your audience. Some of the most common layout properties include padding, and borders.

Padding

Padding is the space between the content of an element and its border. It is used to create space around the content like text or images, and can be set using the padding property in CSS. The padding property can be set using units such as pixels (px) to change the size of the padding.

Examples of padding on a coding page

for padding to be inserted, the code would look like this:

h1{padding: 10px;} --- This is an example of the padding "10px"
h1{padding: 20px;} --- This is an example of the padding "20px"
h1{padding: 30px;} --- This is an example of the padding "30px"
h1{padding: 40px;} --- This is an example of the padding "40px"

Examples of Padding on webpage

This is an example of the padding "10px"
This is an example of the padding "20px"
This is an example of the padding "30px"
This is an example of the padding "40px"

Borders

Borders are the lines that surround an element on a webpage. They can be used to create a visual separation between different sections of a webpage, and can be styled using the border property in CSS. The border property can be set using different values such as border width, border style, and border color to change the appearance of the border.

Examples of borders on a coding page

for borders to be inserted, the code would look like this:

h1{border: 3px solid black;} --- This is an example of the border "3px solid black"
h1{border: 7px dashed red;} --- This is an example of the border "7px dashed red"
h1{border: 10px dotted blue;} --- This is an example of the border "10px dotted blue"
h1{border: 12px double green;} --- This is an example of the border "12px double green"

Examples of Borders on webpage

This is an example of the border "3px solid black"
This is an example of the border "7px dashed red"
This is an example of the border "10px dotted blue"
This is an example of the border "12px double green"

Another thing that can be done regarding borders is setting a specific direction called directional borders. For example, you can set a directionalborder on just the top, bottom, left, or right side of an element.

Examples of directional borders on a coding page

For directional borders to be inserted, the code would look like this:

h1{border-top: 7px solid red;} --- This is an example of the directional border "border-top"
h1{border-bottom: 7px solid red;} --- This is an example of the directional border "border-bottom"
h1{border-left: 7px solid red;} --- This is an example of the directional border "border-left"
h1{border-right: 7px solid red;} --- This is an example of the directional border "border-right"

Examples of directional borders on webpage

This is an example of the directional border "border-top"
This is an example of the directional border "border-bottom"
This is an example of the directional border "border-left"
This is an example of the directional border "border-right"