- CSS Size: Width and Height Explained
- Preparing to Set CSS Width Height
- The Width Height Properties
- Setting CSS Width Height Using Pixel Sizing
- Content Overflow
- Setting CSS Width Height Using Percentages
- Setting the Max Width Value
- Taking the Designs Even Farther
- CSS Height, Width and Max-width
- CSS Setting height and width
- CSS height and width Values
- CSS height and width Examples
- Example
- Example
- Setting max-width
- Example
- Try it Yourself — Examples
- All CSS Dimension Properties
CSS Size: Width and Height Explained
Designing HTML websites through the use of CSS offers an amazing amount of control. You can add awesome colors, images, and text content that combines into wonderful artistic displays. However, those feats of design savvy also need to be formatted for functional use as well.
This is where some of the fine tuning properties of CSS can come into play for a designer. In this brief explainer, you will learn how to manipulate width and height. Together these two options work to get that perfect aspect for the visible HTML size.
Preparing to Set CSS Width Height
Setting the HTML width and height begins with the CSS styling. To provide a visual aid for this tutorial, a sample HTML document and CSS stylesheet will be used. You may choose to copy the code and follow along in your own text editor of choice.
This is the sample HTML code to be used for the tutorial. Note the single “div” tag within the body. This will be the target of our styling changes.
Udacity HTML Example Box Once the sample HTML is set, the CSS stylesheet can be created. If you are not familiar with setting up and linking a CSS stylesheet, check out this tutorial that will help you out with that.
For ease of visibility, a second set of div styles were added as well. This is not required for the tutorial, but feel free to add them into your own code if you like to mimic the style. For more information on the styles applied please see the blog post on CSS borders and CSS colors.
div border-color: black; border-style: solid; border-spacing: 12px; text-align: center; >
This will provide the following display on the HTML page:
With this example set up as a base to work on, the width height properties can now be manipulated.
The Width Height Properties
Using the CSS width and height properties are quite direct in the general syntax. You simply need to call the intended property by name and then provide a value for it. See the example below to see this in action.
div width: “Value to Add”; height: “Value to Add”; >
You can see that the width height properties are set. However, there is no provided value as of yet. This will be covered in separate areas as you can set multiple types of values for these properties. While the example is aimed at an HTML “div” size it should be noted many elements can take the width height properties to alter the HTML content.
Note: The CSS width height properties can also use the “auto” value. If you do not set a specified value for either of these properties the browser will simply revert to the default value of “auto” to fill in the space.
Setting CSS Width Height Using Pixel Sizing
In this example, the width height properties will be defined by using pixels. The div below has been provided with equal values of 100 pixels in both the width and height properties. The word pixel is shortened to just the two letters of “px” when used in CSS. Also, notice that there is no spacing between the numerical value and the letters.
div width: 100px; height: 100px; >
This will provide the following output on the HTML page.
You can see that the text located within the div element has been affected as the spacing constraints limit its working area. This is because the properties of height and width do not change the margin, padding, or border properties. What you see being altered are the CSS width height properties within the element.
If you are not familiar with the CSS box model, check out this post to get a great beginners’ understanding of how it works.
If the value of width is changed to accommodate the text, you can see it visually change on the HTML page directly.
div height: 100px; width: 350px; >
This new code now provides the following output on the page.
Content Overflow
It is also important to understand that the size you apply to the element does not mean the content within is automatically set to fit as desired. In this next example, the width and height have been changed to the following values.
div height: 70px; width: 170px; >
Extra text content was added to the div element to give an example of content overflow.
Setting CSS Width Height Using Percentages
Another option for applying values for the width and height properties, percentages can be used in place of the pixels. This is quite straightforward for the syntax as you add a numerical value followed by the percent sign. As with the “px” for pixels there is no spacing between the number and sign. See the example below where the CSS code was changed to use percentages.
div height: 100%; width: 100%; >
If you remember the issue with the content overflow in the previous pixel values used, then the following output using percentages should prove interesting.
As you can see, the content overflow is not an issue with this form. Percentages are not static units like pixels and can offer the ability to adapt to screen size and other variables. In this next example, the values are not changed but the window for the HTML page is reduced to simulate a standard phone screen.
The content remains the same; however, you can see how it was altered to fit into the new screen size. That seems great for design needs, yet there are some finer points to using a percentage as a value that has to be noted.
When you set a percentage as the value, you are taking a percentage of the real-estate of wherever that element is. In the examples used here, the div is the only element on the HTML document. Setting the height and width to 100% within the body essentially advises the browser to simply use the entire screen as the reference for the percentage.
In this example, a paragraph element has been nested within the div tag.
I am a div elementI am a paragraph element
In the stylesheet, the CSS width height for the paragraph element is set to be at 50%. Added styling was placed for viewing ease.
p background-color: blue; color: white; height: 50%; width: 50%; >
This will give you the following output on the HTML page.
The is used to explain that the percentage used is resolved in relation to where the element is nested. In this case, the paragraph element is within the div element. That means the percentage is resolved as 50% of the div element, not the entire page.
Setting the Max Width Value
You can tell the browser to use a set maximum width for an element through the use of the “max-width” property. The value can be defined in pixels or percentages. It is important to note that you can set a width and a max-width property. The maximum width will inform the browser what the allowed width for the element is. Look at the following example where the div element has this property assigned.
div height: 400px; width: 150px; max-width: 300px; >
Note: In the example above, you can see a width and a max-width property have both been assigned. This is important because there is not an inheritance of values being passed. The width property was set and the browser takes that 150px as the set width. This means it will take priority over the max-width property set after it.
When a max-width has been set, you will notice an interesting effect that is applied to the browser window. With the content’s window reduced in size the browser will automatically add a scrollbar to allow the content to be accessed. See the image below for an example.
This can be useful for obvious reasons where spacing can be an issue.
Taking the Designs Even Farther
This brief tutorial covered just the basics of CSS width height properties. CSS is a wonderful toolbox of various options that are just waiting to be unleashed by your potential. Consider how combining the size of an element can help you style backgrounds or page buttons.
Other options such as changing the size of an entire image for a page background can take that effect even father. Other tools such as Flexbox and CSS Grid also work into the aspect of sizing and organization to tie those design concepts together.
If CSS and HTML are your first entry points into the world of creation through code, consider taking advantage of the path. Knowing how to understand code in various walks of life can lead to some very creative career options and set you apart from the crowd.
Keep learning and trying new things. Not just to enhance your career, but also to have fun in what you can come up with. Today it is learning how to control CSS width height properties. Tomorrow it is your own site with all the creative content you can muster.
If you are looking to fly farther and stronger than ever before, take the first steps with code. Learning to code can help you open doors to those new possibilities of a better you. Embrace Udacity’s Intro to Programming Nanodegree program today to start the journey.
CSS Height, Width and Max-width
The CSS height and width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element.
CSS Setting height and width
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
- auto — This is default. The browser calculates the height and width
- length — Defines the height/width in px, cm, etc.
- % — Defines the height/width in percent of the containing block
- initial — Sets the height/width to its default value
- inherit — The height/width will be inherited from its parent value
CSS height and width Examples
Example
Set the height and width of a element:
Example
Set the height and width of another element:
Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser’s handling of small windows.
Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!
Note: If you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).
Example
This element has a height of 100 pixels and a max-width of 500 pixels:
Try it Yourself — Examples
Set the height and width of elements
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.
Set min-width and max-width of an element
This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.
Set min-height and max-height of an element
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.
All CSS Dimension Properties
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |