CSS Box Model : why change the box Model?

 CHANGING THE BOX MODEL

The last lesson focused on the most important aspects of the box model: box dimensions, borders, padding, and margin.

The box model, however, has an awkward limitation regarding box dimensions. This limitation is best illustrated with an example.

<h1>Hello World</h1>
h1 {
  border: 1px solid black;
  height: 200px;
  width: 300px;
  padding: 10px;
}

In the example above, a heading element’s box has solid, black, 1 pixel thick borders. The height of the box is 200 pixels, while the width of the box is 300 pixels. A padding of 10 pixels has also been set on all four sides of the box’s content.

Unfortunately, under the current box model, the border thickness and the padding will affect the dimensions of the box.

The 10 pixels of padding increases the height of the box to 220 pixels and the width to 320 pixels. Next, the 1-pixel thick border increases the height to 222 pixels and the width to 322 pixels.

Under this box model, the border thickness and padding are added to the overall dimensions of the box. This makes it difficult to accurately size a box. Over time, this can also make all of a web page’s content difficult to position and manage.

In this brief lesson, you’ll learn how to use a different technique that avoids this problem altogether.



Instructions:

We’ll be using the app provided to demonstrate how to work with the box model. Click “Next” to continue.


CLASSIC MEMORY GAME

Let's Test Your Memory!

Click on a tile below to reveal a symbol. Click on another tile to try and reveal two of the same symbols. The game is over when all the cards have been matched.

RESET GAME INVITE A FRIEND! SAVE THIS GAME
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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