# CSS Basic part-3

# CSS Box Model?

- All HTML elements can be considered as boxes.
- box model is used when talking about design and layout.
- The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
![CSS-Box-Model.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1669244741759/Mmi8bzW-U.webp align="left")



##  ***Content*** 
- The content of the box, where text and images appear.

- the content area's size can be defined with the `width, min-width, max-width, height, min-height, and max-height` properties.


##  ***Padding*** 
-  Clears an area around the content. The padding is transparent.

- The thickness of the padding is determined by the ` padding-top, padding-right, padding-bottom, padding-left`, and shorthand `padding` properties.


##  ***Border*** 
- A border that goes around the padding and content.
- The thickness of the borders are determined by the `border-width` and shorthand `border` properties.

##  ***Margin*** 
- Clears an area outside the border. The margin is transparent.
- The size of the margin area is determined by the `margin-top, margin-right, margin-bottom, margin-left,` and shorthand `margin` properties.

%[https://codepen.io/Meghakhatri/pen/VwdXGYO]

#  Float 
- The CSS `float` property specifies how an element should float.
## How do you float an image in CSS ?
```
img { float: right; }
``` 


## float Property

- The` float` property is used for positioning and formatting content e.g. let an image float left or right  to the text in a container.

- **`left` **- The element floats to the left of its container

- **`right`** - The element floats to the right of its container

- **`none`**- The element does not float


- **inherit **- The element inherits the float value of its parent
%[https://codepen.io/Meghakhatri/pen/zYaWJrL]


# clear 

- When we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.
- The clear property specifies what should happen with the element that is next to a floating element.
## clear Property
- ***`none`*** - The element is not pushed below left or right floated elements. This is default

- ***`left`***- The element is pushed below left floated elements

- ***`right`***- The element is pushed below right floated elements

- ***`both`***- The element is pushed below both left and right floated elements
- ***`inherit`***- The element inherits the clear value from its parent

```
div1 {
  float: left;
}

div2 {
  clear: left;
}
``` 


![download (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669247743199/HQqpBoOZl.png align="left")

# CSS display
- The `display` property specifies the display behavior of an element.

## display Property

![display-property-values.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669266821913/sTyOE2YFj.png align="left")

- ***`inline`***-Displays an element as an inline element (like `<span>`). Any height and width properties will have no effect
%[https://codepen.io/Meghakhatri/pen/zYaWMMR]

- ***`block`***-Displays an element as a block element (like `<p>`). It starts on a new line, and takes up the whole width
%[https://codepen.io/Meghakhatri/pen/YzvaRRg]


- ***`inline-block`***-Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
%[https://codepen.io/Meghakhatri/pen/vYrRzxE]