CSS Box Model : Diagram

 THE BOX MODEL

The box model comprises the set of properties that define parts of an element that take up space on a web page. The model includes the content area’s size (width and height) and the element’s padding, border, and margin. The properties include:

  1. width and height: The width and height of the content area.
  2. padding: The amount of space between the content area and the border.
  3. border: The thickness and style of the border surrounding the content area and padding.
  4. margin: The amount of space between the border and the outside edge of the element.



Instructions:

Question

what are the default values of padding, border, and margin?

Answer

Depending on each browser those values will vary, therefore is commonly recommended to “reset” those values to 0 in a CSS file. Browsers provide default values for a general support for legible content, but sometimes they will get on your way. Another thing is that not all tags get the same default values for padding or margin, although the only default value for border is medium none currentcolor where medium is the thickness, none is the style, and currentcolor sets it to the color of the background.
Here is a list of common tags and their most common default values:


body - margin: 8px; h1 - margin-top: 0.67em; margin-bottom: 0.67em; h2 - margin-top: 0.83em; margin-bottom: 0.83em; h3 - margin-top: 1em; margin-bottom: 1em; h4 - margin-top: 1.33em; margin-bottom: 1.33em; h5 - margin-top: 1.67em; margin-bottom: 1.67em; h6 - margin-top: 2.33em; margin-bottom: 2.33em; p - margin-top: 1em; margin-bottom: 1em; ol - margin-top: 1em; margin-bottom: 1em; padding-left: 40px; ul - margin-top: 1em; margin-bottom: 1em; padding-left: 40px;




Comments

Post a Comment

Popular posts from this blog

The Box Model in DevTools( With YT Video)

Image
  The Box Model in DevTools View and edit an HTML element’s box using Chrome DevTools. Introduction All HTML elements are boxes made up of four components: a content container, padding, border, and margin. In our  Box Model lesson  we introduce these four properties and use them to position elements on a website. If you have not taken this lesson, we recommend you do so now, before continuing. In this article, we will introduce how Google Chrome’s DevTools can be used to view the box around each element on a web page. 1. View Box Model Dimensions with DevTools You can use Google Chrome’s DevTools to view the box around every element on a web page. There are a few different ways to open DevTools, depending on your platform: Mac command  +  option  + i View > Developer > Developer Tools Chrome 3 dot menu ⋮ > More Tools > Developer Tools Windows control  +  shift  + i F12 Chrome 3 dot menu ⋮ > More Tools > Developer Tools Use w...
Read more

CSS Box Model : box-sizing_ border-box

Image
  CHANGING THE BOX MODEL Box Model: Border-Box Fortunately, we can reset the entire box model and specify a new one:  border-box . * {    box-sizing : border-box ; } The code in the example above resets the box model to  border-box  for all HTML elements. This new box model avoids the dimensional issues that exist in the former box model you learned about. In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change. <h1> Hello World </h1> * {    box-sizing : border-box ; } h1 {    border : 1px solid black ;    height : 200px ;    width : 300px ;    padding : 10px ; } In the example above, the height of the box would remain at 200 pixels and the width would remain at 300 pixels. The border thickness and padding would remain entirely  inside ...
Read more