LEARN CSS BOX MODEL IN 15 MINUTES - CSS TUTORIAL FOR BEGINNERS #8
CSS Box Model Explained is a css tutorial that explains what is CSS Box Model by detailing how you can use the CSS Box Model Layout . This is a beginner tutorial for understanding the basic CSS Box Model and manipulating the web layout by learning how the html elements are treated as a box model. The box model is explained by using the div elements of html that work as a container to make the box . This rectangular box has width, border, margin and padding as well. By using box sizing default value which is content box, the width of the box increases on increasing the padding , margin and border since all these values add up to the width value . But , when you use the border-box value for the box-sizing, then, the width value does not get added up to the increased padding value or border value but remains unchanged except in the case of margin. The increase in margin value leads to the increase in the width in this case. So, web designers prefer to use the value of border-box for box-sizing.
Below, are the links to the code for this tutorial on both repl.it and code pen files. You are advised to follow the code and experiment with the different values for box-sizing as explained below to see the different effects in the box dimensions. Also, play along with the border, margin and padding sizes to see the result. If you have any doubts or issues with understanding the same, please do comment and let me know and I will be glad to be of help to solving your problem if any.
https://repl.it/@meeramenon07/Lesson-...
https://codepen.io/meeramenon07/pen/Z...
Subscribe for more such free lessons:
/ @edtechbymeera
#CSSBoxModel #edtechbymeera
#cssBoxProperty #cssboxlayout
#csstutorialforbeginners