CSS - The Box Model

  CHANGING THE BOX MODEL Review: Changing the Box Model In this lesson, you learned about an important limitation of the default box model: box dimensions are affected by border thickness and padding. Let’s review what you learned: In the default box model, box dimensions are affected by border thickness and padding. The  box-sizing  property controls the box model used by the browser. The default value of the  box-sizing  property is  content-box . The value for the new box model is  border-box . The  border-box  model is not affected by border thickness or padding. Youtube Video about Box Model By Anuj Bhaiya

  CHANGING THE BOX MODEL The New 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.

  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 ...

  CHANGING THE BOX MODEL Box Model: Content-Box Many properties in CSS have a default value and don’t have to be explicitly set in the stylesheet. For example, the default  font-weight  of text is  normal , but this property-value pair is not typically specified in a stylesheet. The same can be said about the box model that browsers assume. In CSS, the  box-sizing  property controls the type of box model the browser should use when interpreting a web page. The default value of this property is  content-box . This is the same box model that is affected by border thickness and padding. Instructions: Study the diagram to the right. It illustrates the default box model used by the browser,  content-box . When you’re done, continue to the next exercise.

  CHANGING THE BOX MODEL Why Change 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...

  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  ...