CSS 3

SESSION 2

Margin

Note : We will take a <div> as example to implement

What is margin?

  • margin is the space outside an element’s border.
  • It creates distance between the element and its neighbors.
margin

Example :

  • margin: 10px; /* all sides = 10px */
  • margin: 10px 20px; /* top/bottom = 10px, left/right = 20px */
  • margin: 10px 20px 30px; /* top = 10px, left/right = 20px, bottom = 30px */
  • margin: 10px 15px 20px 25px; /* top=10, right=15, bottom=20, left=25 */

Note : Margin can take a negative value

Note : Margin :auto tells the browser to automatically calculate the margin space.

Note : Horizontal margin (left/right): we add them together

Note : Vertical margin (top/bottom): they collapse

Quick Comparison (Margin vs Padding)

  • Margin → space outside the border.
  • Padding → space inside the border, around the content.
margin and padding

Padding

What is padding?

  • padding is the space inside an element’s border, between the content (like text or an image) and the border.
  • Think of it as inner spacing, while margin is outer spacing.
padding

Note : Padding can't take a negative value & auto value

Example :

  • padding: 10px; /* all sides = 10px */
  • padding: 10px 20px; /* top/bottom = 10px, left/right = 20px */
  • padding: 10px 20px 30px; /* top = 10px, left/right = 20px, bottom = 30px */
  • padding: 10px 15px 20px 25px; /* top=10, right=15, bottom=20, left=25 */

Border

What is Border ?

In CSS, the border is the line that goes around the padding and content of an element. It’s part of the box model.

border-top - border-right - border-bottom - border-left

Each border has 3 main parts:

border-width:

border-top-width:2px ;

border-right-width:5px ;

border-bottom-width:3px ;

border-left-width:1px ;

border-width : 5px 3px ;

border-width : 5px ;

border-style

border-top-style:dotted ;

border-right-style:solid ;

border-bottom-style:double ;

border-left-style:dashed ;

border-style: dotted solid ;

border-style: solid ;

border-color

border-top-color:red ;

border-right-color:green ;

border-bottom-color:blue ;

border-left-color:yellow ;

border-color: red blue ;

border-color: blue ;

Shortcut

border : 1px solid red ;

border-radius

border-top-left-radius: 5px ;

border-top-right-radius: 5px ;

border-bottom-left-radius: 5px ;

border-bottom-right-radius: 5px ;

border-radius: 5px 5px 0px 0px ;

Note : To create Circle must make width = height and border-radius = 50%

Challenge

Box-Sizing

The box-sizing property in CSS defines how the browser calculates the width and height of an element.

Box-Sizing

box-sizing : content-box ;

box-sizing : border-box ;

Note : add border-box in universal selector * { box-sizing : border-box ; } it changes how the browser calculates the width and height of an element.

Box-Shadow

The box-shadow property adds shadow effects around an element’s box. You can set the [Horizontal - Vertical - Blur - Spread - Color - Inset].

                width: 200px;
                height: 200px;
                background-color: violet;
                border-radius:22px ;
                box-shadow: -5px -5px 5px 5px rgba(114, 114, 114, 0.493) ;

Challenge

Create two cards margin between them 20px and padding insed card 10px