CSS Box Model

This thread contains 2 replies, has 3 voices, and was last updated by Darshan Rathod 5 years, 6 months ago.

  • Author Replies
    • #18329

      What is the CSS Box Model used for? What are the elements that it includes?

    • #45330

      When laying out a document, the browser’s rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

      Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

      Box Model

      The content area, bounded by the content edge, contains the “real” content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

      If the box-sizing property is set to content-box (default), the content area’s size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

      The padding area, bounded by the padding edge, extends the content area to include the element’s padding. Its dimensions are the padding-box width and the padding-box height.

    • #50960

      The CSS box model used to define how every web page on the Internet is rendered. CSS treats each element in HTML document as a “box” with different properties which determine where that appears on the page.
      Each HTML element comes in two varieties. CSS Box Model includes Two elements:

      Block Element: block elements is that they take up the whole space of the box they are placed in.
      Inline Element: inline elements take up only as much space as they need. This element also doesn’t move to a new line or push other elements down.

Viewing 2 reply threads

You must be to reply to this thread.Please or . Registration is 100% free.


Call Us Now For Free Consultation97370 05566

Our experts listen to you patiently and suggest you the right course after conducting a personality profile test. Register your interest below to schedule personality profile test for you.


Copyright 2016-2024 Smart Mentors. All Rights Reserved.



Sign up now to Become An Instructor

    Register your Interest

      cf7captchaRegenerate Captcha