Welcome, hope you are enjoying your weekend.

Brief: Revised Css today and practised making components in it. Not much but I am happy though learning it.

Detailed: I, somehow, am more confident in js than CSS. It's kind of confusing, there are plenty of ways to achieve one thing and they don't work in all browsers the same way.

Every element displayed on web page is in box form. The css has box-model properties to manage the dimension of the element and layout.

(source: https://www.geeksforgeeks.org/css-box-model/)

The content(text, image etc) has width and height properties. Then comes the padding, it's invisible between the content and the border. The border is the line around the element, though it is inside the element. After it comes the margin, which is the white space between the elements. When two elements have different margins, we say they collapse and the bigger one is shown. We can skip any of these(even the content). There is something called fill area. It's the area occupied by a background image or color and is equal to content+padding + border.

I learned the types of box models:- inline, block and inline-block. The block elements take 100% of the parent width, have a line break after them(the next element will be stacked below it), and we can apply width, height, padding & margin on all sides. The inline elements take the space of content only, and don't occupy space more than it. Height & width don't apply to it(content size doesn't change). As far as margin and padding are concerned, they are applied horizontally, ie they make space horizontally only. There might be confusion regarding this as giving padding vertically to an element with bg-color/image do stretch it but they don't create any space(content remains at the same place and also no effect on the surrounding except color/img overlap them). For inline-box, it contains the best of both. The content occupies the space that it needs but height & width also apply. There is no line break after it and margin and padding applies to all side.

! I am going study the whole night today, so rest things I will share it in tomorrow's blog. Have a good day.

Personal: I took a fast today. It was for a religious festival, also I should focus on my diet more as I have gained a lot of weight. Currently standing at 105kgs. I also started yoga, after a break. It does help in the morning. Now I don't feel lazy in the morning after waking up. From tomorrow I am also starting exercising.