Each part helps to design the website the way the designer wants as you have the content of the website in the middle of the box model which is where all your images and text goes and and padding clears the area around the content which is defined by code however you cannot see the padding and then after you have content and padding you will have to define your border as the border goes around the padding and content so you have to know how many pixels it needs to take up as well as you can set the color of the border as it is visible unlike the padding, the final part of the box model is the margin, that does the same thing as the padding except it does it outside of the border to create an area of space outside of the border. You can use selectors to help to specify what things you what to change for example you could change the colours of parts of the box model for example you could change the background in the box and colour of the border and you might use the selector for paragraphs to change the colour of the text within the box or perhaps use it to change the heading of it, you might need to highlight something specific by using an underline or bold selector.

The image below shows how you code for a box model by defining the different dimensions that you'll need as you need to define a width so that you can define the sizes for each of the parts for the box model as well as it defines color for the background and border.