DEV Community

Cover image for BEGINNER
front_end_shifu_2022
front_end_shifu_2022

Posted on

BEGINNER

Hello everyone this is my first post in DEV.
First of all Lemme tell Y'all this is my first month of internship and I do have a dream of becoming Full-stack developer.
I do have six months to learn all concepts related to Front-end development. So I can start my Job .In these coming six months I need to work hard.
Well I will make this post shorter. As you know I am beginner so I just started learning HTML CSS basics .I Think the things which I learned ,I should
share it on this forum ,like this I will speed up my learning pace. Today I would like to share what I learned about box-model.
The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and
the actual content. In start it was a bit confusing but now i can understand it.
I will Explain the different parts of box-model
1: Content - The content of the box, where text and images appear
2: Padding - Clears an area around the content. The padding is transparent
3: Border - A border that goes around the padding and content
4: Margin - Clears an area outside the border. The margin is transparent

in order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Remember: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

For now That's all I know. I will welcome any suggestion if you have. Thanks for reading.

Top comments (0)