CSS Box Model : Height and Width

 THE BOX MODEL

An element’s content has two dimensions: a height and a width. By default, the dimensions of an HTML box are set to hold the raw contents of the box.

The CSS height and width properties can be used to modify these default dimensions.

p {
  height: 80px;
  width: 240px;
}

In this example, the height and width of paragraph elements are set to 80 pixels and 240 pixels, respectively — the px in the code above stands for pixels.

Pixels allow you to set the exact size of an element’s box (width and height). When the width and height of an element are set in pixels, it will be the same size on all devices — an element that fills a laptop screen will overflow a mobile screen.


Instructions:

1.Add a height of 700 pixels to #banner.

Hint:

The #banner ruleset starts on line 24. To set the height of its content, add another declaration using the height property with a value of 700px.


2.Set .pull-quote width to 350 pixels.


Hint:

The .pull-quote ruleset is on line 72. To set the width of the its content, create a declaration using the width property with a value of 350px.


3.Set the #banner .content h1 width to 400 pixels.


Hint:

The #banner .content h1 starts on line 32. Use the same technique as above to set the width. You’ve got this!



Question

Why do we need to set height and width, 100 and why some elements don’t have it?

Answer

It is not always necessary to set a height and width. Elements by default are block elements and will have the same width as the container, and their height will vary depending on their content. The element’s measurements will be decided by what purpose we want it to have, just like news paper’s editors will arrange the columns, sometimes we will want to have an image that will only cover half of the screen, or even less. That is when we could use height and/or width measurements.

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