CSS - Width

The width property of CSS is used to set the width of an element in HTML.

An important thing to note is that the width property does not contain borders, margins or padding.

Width property in CSS with numeric value

We can specify a numeric value for width property and the width would be adjusted accordingly.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			width: 100px;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output, the text, This is the first paragraph. is displayed in two lines.

That is because we have set the width of the <p> element as 100px.

<style>
	p {
		border-style: solid;
		width: 100px;
	}
</style>

And the paragraph fits within that width.

Now, what if we want to display the contents of <p> element as is. i.e. In a single line.

And that is where auto comes into picture.

Width property in CSS with value as auto

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			width: auto;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output, the the contents of <p> element as is. This is because we have set the value of the width property as auto.

<style>
	p {
		border-style: solid;
		width: auto;
	}
</style>

Width property in CSS with value in %

Say you want your HTML element to be displayed covering half portion of the screen. In such cases you can use the value of width property in %.

Since in this case we want our element to be displayed covering half portion of the screen, we can use the value of width property as 50%.

Example :

<html>
<head>
	<style>
		p {
			border-style: solid;
  			width: 50%;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

❮❮ PREV NEXT ❯❯