CSS Box Model : Auto (margin: 0 auto;)

The margin property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example:

div.headline {
  width: 400px;
  margin: 0 auto;
}

In the example above, margin: 0 auto; will center the divs in their containing elements. The 0 sets the top and bottom margins to 0 pixels. The auto value instructs the browser to adjust the left and right margins until the element is centered within its containing element.

In order to center an element, a width must be set for that element. Otherwise, the width of the div will be automatically set to the full width of its containing element, like the <body>, for example. It’s not possible to center an element that takes up the full width of the page, since the width of the page can change due to display and/or browser window size.

In the example above, the width of the div is set to 400 pixels, which is less than the width of most screens. This will cause the div to center within a containing element that is greater than 400 pixels wide.


Instructions:

1 .Set the width of the .pull-quote class elements to 350 pixels.

Hint:

Setting the width of an element is done with the width property followed by the value. Remember, pixels is written as px!


2.In one line, set the vertical (top and bottom) margins of the .pull-quote class to 0 and the horizontal (left and right) margins to auto.

Hint:

Here’s a refresher for how to create a ruleset that will horizontally center a <div>:

div {
  margin: 0 auto;
}

For the margin ruleset above, the first value 0 sets the vertical (top and bottom) margin, and the second value auto sets the horizontal (left and right) margin.


3.Set the vertical margins of the #main element to 0, and the horizontal margins to auto.


Hint:

Use the same syntax as the above. Remember to add a space between the 0 and auto values!



Question & Answers

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