Introduction
When working with CSS you will eventually run into designs that require you to rearrange the layout of your document to reach your design goals. When faced with such a task CSS provides us with various ways of doing this. In this article, we will cover some of those ways.
1. Positions:
The position property sets how an element is placed or positioned in our document. The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements. The position property also specifies the type of positioning method used for an element. It could either be static, relative, fixed, absolute or sticky.
HTML
<div class="ball"></div>
CSS
div.ball{
border-radius: 50%;
background-color: red;
width: 100px;
height: 100px;
}
Let us use the absolute position and give the top, left and right some values
CSS
position: absolute;
top: 100px;
left: 100px;
right: 100px;
Result
2. Margin:
Margins can simply be said to be the space outside of the elements border. It affects the surrounding space based on what values we set the margin property to.
Let us use the margin:
CSS
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 100px;
We could also write it as:
CSS
margin: 100px;
/* where top, right, bottom and left = 100px */
3. Padding:
Paddings are the space inside or within an element. It controls the space within an element based on what values we set the padding property to.
Let us now try using the padding property:
CSS
padding-top: 100px;
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
We could also write it as:
CSS
padding: 100px;
/* where top, right, bottom and left = 100px */
Result
We should take note not to forget that the padding property is fundamentally different from the margin property so as to not mix them up.
4. Float:
The float property does what it says, it floats an element based on the value assigned to it.
Let us add the float property to the ball class and assign a value to it.
CSS
float: right;
Notable Mention
Center:
This is a depreciated and obsolete html tag. It centers all elements enclosed within its tags. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
HTML
<center>
<div class="ball"></div>
</center>
Conclusion
There are many other useful properties such as display, flex, grid etc..., but I will cover them in another article. For now, with this guide, I hope that I was able to further breakdown some of these concepts to your better understanding. Stay happy coding and see you in future posts.
You can find me on Twitter and Linkedin.
Top comments (14)
🤙
Good work👍🏽
Thank you
Good work, simple and concise
Thank you
thanks' to you, this article help me
I’m glad I could help
a nice summary
Thank you
👏🏻👏🏻
Great job !!! You explained all the concepts clearly.
Thank you
This is a nice summary when you have a simple layout requirements and you don't want to deal with Flexbox and CSS Grid. I'd love to see a guide on using those.
Thank you Vic. More articles coming soon.