Css box model

  • 301 views
Uploaded on

 

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
301
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Box Model
  • 2. The CSS box model is essentially a box that wraps around HTML elements It consists of: ◦ margins, ◦ borders, ◦ padding, and ◦ the actual content.
  • 3. Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear
  • 4. The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin width:220px; padding:10px; border:5px solid gray; margin:0px; Total element width = 250 px
  • 5. CSS Border Property
  • 6. CSS Margin
  • 7. The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties.
  • 8. CSS Padding
  • 9. The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties.