CSS Box Model (Margins, Padding & Layouts)
CSS Box Model
"In the CSS Box model concept, we consider all HTML elements as box-shaped items. By thinking like that, It is very easy for developers to add margins, padding, and border attributes to those elements."
The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The image below illustrates the box model.
Code:-
<html><head><style>div { background-color: lightblue; width: 300px; border: 15px solid yellow; padding: 50px; margin: 20px;}</style></head><body><h2>Learn About The Box Model</h2><p>You can click on HTML tab to view the code. Look how the different CSS properties are used to do changes considering the Box Model</p><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></body></html>Output:-
Written by: W.A. Eranga Dewmini
No comments:
Post a Comment