When we make an element or content within the blog, we need to customize the element that we made.
It is intended that the element can appear good and the reader's blog can feel comfortable with the content that we provide.
Before customizing the element or component in our blog, we must know what is different about content, padding, border, and margin in our blog.
Why we must know?
Because the four things above are the main properties within the view of the blog.
If you inspect the website on the desktop, you can see that every element on the website, contains four things above.
Okay.., let's start with the first one.
1. Content
The first element is content.
What is Content..?
Content is something that is shown on the web. There are many things about content, like: text or paragraphs, images, videos, links, and others.
Inside HTML, content with text or paragraph type is written using <p> tag.
Consider the following example:
< div>
< p> Hello World!</ p>
</ div>
With display results.
Content is the deepest element among other elements.
2. Padding
The second property is padding.
What is padding?
Padding is a space or distance among content with borders.
The padding property has four values, that is: padding-top, padding-right, padding-bottom, and padding-right. Each one will give a space based on the given value.
The images above are illustrations of padding properties.
Consider the following example.
code.
< div>
< p style= "padding:17px; border:1px solid black;"> Hello World!</ p>
< p style= "padding:17px; border:1px solid black;"> Hello World!</ p>
< p style= "padding:17px; border:1px solid black;"> Hello World!</ p>
</ div>
With showing results.
Hello World!
Hello World!
Hello World!
From the example above, property padding: 17px; will be given the same space 17px for each padding above, that is padding-top, -left, -bottom, and -right.
The example above is the use of padding in content.
let's see what if the content doesn't use padding.
< div>
< p style= "border:1px solid black;"> Hello World!</ p>
< p style= "border:1px solid black;"> Hello World!</ p>
< p style= "border:1px solid black;"> Hello World!</ p>
</ div>
Showing results.
Hello World!
Hello World!
Hello World!
3. Border
The third element property is Border.
What is a Border..?
The border is an HTML element that can use to make an edge or border from the content.
This is intended, apart from enhancing the appearance of the content, as well as a differentiator between one content and another.
Border element has three main properties, that is:
border-width: this property is used to customize the width border.border-style: this property is used to customize the style of the border.border-color: this property is used to customize the color of the border.
Besides that, the border has another property, that is:
border-radius: this property is used to customize the radius of the edge corner.
Consider the following image.
The image above is an illustration of the border element.
Consider the following example.
< div style= "border: 3px solid purple; padding: 10px;" >
< p> Hello World!</ p>
< p> Hello World!</ p>
< p> Hello World!</ p>
</ div>
From the example above, we make a border element with 10px padding.
Don't forget that, we must use value solid color when we make a border!
The program above, shows results.
Hello World!
Hello World!
Hello World!
Or.. we can make a border for each content from the example above.
< div>
< p style= "padding:10px; border:2px solid red;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid yellow;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid green;"> Hello World!</ p>
</ div>
Showing results.
Hello World!
Hello World!
Hello World!
4. Margin
The fourth element property is Margin.
What is Margin?
The margin is the space between a piece of content with another else.
We can customize the margin with four values, there are margin-top, margin-right, margin-bottom, and margin-left.
similarly with padding which has four spacing properties.
if the padding provides a distance between the content and the border, then the margin will provide the distance from the border to the exit according to the specified size.
For example, margin: 10px, it will provide a distance of 10px from the border.
The image above is an illustration of the margin property.
Next, we will try it on the program.
Consider the following program.
< div>
< p style= "padding:10px; border:2px solid red; margin:15px;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid yellow; margin:15px;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid green; margin:15px;"> Hello World!</ p>
</ div>
From the program above, we customize the element with 15px margin, it will given space equally among margin-top, -left, -bottom, and -right.
Showing the results.
Hello World!
Hello World!
Hello World!
Or.. with display-flex appearance, showing results.
Sidebar
Article
Advertisement
If we don't give a margin for the element, it will be showing results.
< div>
< p style= "padding:10px; border:2px solid red;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid yellow;"> Hello World!</ p>
< p style= "padding:10px; border:2px solid green;"> Hello World!</ p>
</ div>
The output is..
Hello World!
Hello World!
Hello World!
Sidebar
Article
Advertisement
So, this is enough for an explanation of the differences in content, padding, borders, and margins. Hopefully, with the explanation above, you can understand it well. If you have anything to ask, write in the comments column.
Post a Comment
Post a Comment