Artificial Intelligence
04/06/2025
It is a concept that every single element in the browser is a box. And we can control different properties of the box.
Three main parts
Border-color: red;
Border-width: thick;
Border-style: dotted;
Border: 3px solid green;
Width: 500px
height:430px;
Width: 50%;
Padding: 34px;
Box-sizing: border-box;
Block | Inline | Inline-Block |
Breaks onto a new line. | Box does not break onto a new line. | Width and height are respected |
Width and height are respected | Width and height do not apply. | Box does not break onto a new line |
Padding, margin and border cause other elements to be pushed away from the box. | Vertical padding, margin, and borders apply but do not cause other inline elements to move away from the box. | Hybrid of inline and block |
The box extends in the inline direction to fill available space in container (unless styled otherwise). | Horizontal padding, margin and border will apply and cause other boxes to move away. | Padding, margin, and border will cause another element to be pushed away from the box |
Display: block;
Display: none;
Margin: -34px;
Margin: 0 -auto;
If we fix width as:
max-width: 500px;
min-width: 300px;
Width: 80px;
Border-radius: 20px;
Box-shadow: 2px 1px 3px blue;
Overflow: scroll;
Overflow-x: hidden;
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
2 Responses
I found myself deeply moved by this piece. It’s rare to come across writing that doesn’t just inform but transforms. You’ve taken complex ideas and made them feel not just understandable but important. Reading this, I felt both challenged and comforted — a true testament to the power of your words.