Welcome Guest! (App Version 3.1)

websitnero logo name

Dimensions - Height and Width

Height and Width of HTML Elements

Height and Width are the 2 dimensions of any element in a web page. If either of height or width is '0', then the element will not be seen on the web page.

Through CSS we can control the width and height of any element. Also, a web page on laptop or mobile screen is only 2D and not 3D so only width and height values are there as properties of HTML elements and there is no depth property.

To change height and width of an element, simply change or define the values for these properties in style tags.

Look at the example below to see how we are setting height and width of a div element, within style tags, in the head section.

Example

<head>
<style>
  div{
  height:100px;
  width:100px;
  background:yellow;
  color:red;
}
</style>
</head>

<body> 
  <div>This is a div. </div>
</body> 

Here, in the example above we see that we have a div whose 2 properties -- 'width' and 'height' we are changing through CSS. You can change and alter the values to see how the new div looks. Also, I have added a background to the div so that the changes are easily visible.

Further Reading

1. Width in CSS

2. Height in CSS

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.