BOX MODEL(A simple guide)

Sometimes starting out to design the Layout of your web page can be pretty difficult, if you don’t really understand how to effectively make use of the box-model.

I was in that position when I started out, one of the major issue I encountered, was properly outlining my layouts. It’s important that before you begin designing your HTML elements that you have a proper structure of what you want to build. Because when you don’t, it becomes difficult to actually position your web page. One of the importance of understanding the box-model is that you are able understand how to effectively understand how to structure your web page.

The Box- Model is a fundamental, and important aspect for the composition of an HTML web page. Given that its deals with the Layout and content styling of the web page. For any web page to stand out, its has to implement the components of the box model. Its Important to note that everything in HTML can be seen as a box. The box-model consist of

1) Content

2) Margins

3) Border

4) Padding

However, if these modules are not used appropriately. It’s affects the outcome of your webpage

Content: When designing a web page, there must always be a content which helps the users connect and understand what the page is all about.

Margins: Margin is the spacing on the outside of our box.

Padding: Padding is the Spacing within the box

Border: Helps with the outline of the box, it’s alllows us to specify the style, width, color of an element.

However, this illustration above helps us to understand how important the box model helps us to wrap around our content.

Here is a simple example of a box model illustration.

When styling your HTML element , you always want to ensure that you understand how to set a proper width, because when you don’t understand how to effectively set a proper width, you realize that your web page becomes overly unbalanced.

Another model which is important, is how to set the height. Most times this is usually difficult, when trying it out for the first time, I myself had challenges in setting an appropriate height. But with constant practice, it will get better. You always want to ensure that you set an height which matches with your content or images.

Padding: You barely cannot write any CSS without adding Padding to it. Why is this so? Because you want to ensure that your web page is readable and well outlined. Padding adds a bit of style to the structure of our webpage, and it’s important to know how to set your padding within your CSS box.

Margins: Margins is also important, given that it’s helps the outer outline of our design layout. For instance you always, want a space at the outer space of the section of your HTML components. You don’t want everything all packed up together. You want a proper layout. Margin helps us do that. They are different ways to set your margins. Eg margin-top or margin-bottom.

This why it’s important to understand the basic fundamentals of the usefulness of Box Model.

You can also read more about box model here 👉🏼 https://developer.mozilla.org/en-US/docs/Learn/CSS/Buildin

Now you understand how to make use of the box model.😊

I recently worked on designing a registration form, and understanding the box model helped me with layout and a well structured design. But a mix of animation and playing around using Flex which I love so much!

Here is the link!👇🏼

https://codepen.io/The_Victoria/pen/vYEbZXb

I hoped this simple guide helped.

#Vggvirtualinternship.