Scribd Logo
Upload

Welcome to Scribd!

  • Lecture19 BoxModel

    Uploaded by

    Karthikeyan P.
    7 views6 pages
    This lecture discusses the CSS box model which describes the layout of elements. It introduces the box model consisting of content, padding, border, and margin. It explains how margins can be cumulative when adjacent, but collapse when elements overlap. The summary recommends using box-sizing: border-box and covers other key topics like the universal selector, content overflow, and backgrounds before moving on to the next topic.

    Original Description:

    Original Title

    Lecture19-BoxModel

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This lecture discusses the CSS box model which describes the layout of elements. It introduces the box model consisting of content, padding, border, and margin. It explains how margins can be cumulative when adjacent, but collapse when elements overlap. The summary recommends using box-sizing: border-box and covers other key topics like the universal selector, content overflow, and backgrounds before moving on to the next topic.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views6 pages

    Lecture19 BoxModel

    Uploaded by

    Karthikeyan P.
    This lecture discusses the CSS box model which describes the layout of elements. It introduces the box model consisting of content, padding, border, and margin. It explains how margins can be cumulative when adjacent, but collapse when elements overlap. The summary recommends using box-sizing: border-box and covers other key topics like the universal selector, content overflow, and backgrounds before moving on to the next topic.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    In this lecture, we will discuss…

    The Box Model


    The Box Model
    border   padding  

    margin  

    Content   height  

    width  
    Cumulative Margins

    90px  

    Content   Content  

    40px   50px  
    Cumulative Margins?

    20px  
    Content  
    50px?  

    30px  

    Content  
    Cumulative Margins

    20px  
    Content  
    30px  

    Margins  collapse  
    Content  
    30px  
    Summary
    ² Box model – essential to understand
    • Prefer box-sizing: border-box
    ² The * (universal) selector
    ² Cumulative and collapsing margins
    ² Content overflow

    NEXT:
    The background Property

    You might also like