CSS Box Model : The New Box Model (border-box)

 CHANGING THE BOX MODEL

Now that you know about the new box model, let’s actually implement it in the browser.

* {
  box-sizing: border-box;
}

It’s that simple! In the example above, the universal selector (*) targets all elements on the web page and sets their box model to the border-box model.


Instructions:

In style.css, change the box model for all elements on the web page to the new box model.

You probably didn’t see a difference in the web page to the right - that’s ok! The new box model simply makes sure that the dimensions of elements remains the same regardless of border width and padding.

Comments

Post a Comment

Popular posts from this blog

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

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 : CheatSheet

  The Box Model Save Print Cheatsheet Share TOPICS Syntax and Selectors Visual Rules The Box Model Display and Positioning Colors Typography CSS Margin Collapse CSS  margin collapse  occurs when the top and bottom margins of blocks are combined into a single margin equal to the largest individual block margin. Margin collapse only occurs with vertical margins, not for horizontal margins. /* The vertical margins will collapse to 30 pixels instead of adding to 50 pixels. */ .block-one { margin : 20px ; } .block-two { margin : 30px ; } CSS  auto  keyword The value  auto  can be used with the property  margin  to horizontally center an element within its container. The  margin  property will take the width of the element and will split the rest of the space equally between the left and right margins. div { margin : auto ; } Dealing with  overflow If content is too large for its container, the CSS  overflow  ...
Read more