UNIT 20 P2 - Explain the Features of the Box Model for CSS

 

UNIT 20 P2 - Explain the Features of the Box Model for CSS

To create a website you must know what is going on in the first place. You must understand the fundamental basics of why such features are able to be what they are on WebPages. CSS – Cascading Style Sheets is one of them, each of them features what is known in the trade as the “Box Model” which is the basic understanding of how CSS works on WebPages and make it be as it is implemented on you webpage, but what actually is the Box Model?

As you place HTML content in your webpage there are a few things that allows it is viewed by many people. Each HTML content is surrounded by an invisible (unless made to be viewed) box that makes content easy to read and stand out alone rather than overlap. Each browser recognises this box and has become the norm to use when displaying content.

Each box model consists of 4 major factors: Margin, Border, Padding and Content. Illustrated above is how the box model is like when in a webpage. Each part can have a separate setting of width and also colour which depends on the user, which means if a designer wishes to have a massive border or have no margin at all it, can happen.

Here is an example of a customised box model to give a large padding and minimal border and margin:

Margin – The most outside box cannot be coloured since it is fully transparent. The margins size can be customised to the designer’s requirement it means if you want to join another contents margin together, that can happen. Margins position can be changed via CSS.

Border – After margins box, it is able to be coloured or remain transparent. The requirement for border is not needed and if set to “0” it can be removed, it is solely for decoration use and is able to be dashed too,

Padding – Next after border it too can be set to “0” to be fully removed however a specific colour cannot be chosen rather it uses the background colour of the box to be its colour. Just like padding its sides can be changed via CSS to give a unique look.

Content – The heart of the box squarely fit in the centre where everything is inside such as text, image, video or any other element depending on what the designer wants. This is the most important aspect and is why it is protected by the 3 squares.  

The box model is an important aspect especially when dealing with CSS and its content. With the content being wrapped around 3 boxes for protection against other box models, you can represent that content with others or stand out by itself. Each box is customisable to its desire with the margin being the invisible space if need be. The box model is very important to the content placed within them so that it is “protected”. This is the reason why content is separated and readable rather than be all together with no sense of placement, this gives the look of websites to be more professional and better looking.