Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Width and Height
With CSS, not only can you code the width and height into those and other previously forbidden elements, but there are several units of measure and more than simple width and height.
Width and Height
Width and height can be set using several different units of length in CSS. I'll include them at the end, but up to that point I'll refer to everything in pixels. I'm a graphics guy and old school so that's the unit I'm most familiar with—no sense in changing horses in the middle of a stream. Width and height can be set using inline, embedded, or external styles. [ tutorial ] Here's a division element coded with inline CSS:
NOTE | The width and height do not include any padding, margins, or borders used. Those add to the width/height of an element unless the box-sizing property is used. |
The value options for width and height are:
auto | length | % | initial | inherit
Here's what those mean:
- Auto
- Default value. The browser calculates the width and height.
- Length
- Defines the length in various units (see chart at the end).
- %
- Defines the width or height as a percentage of the containing element.
- Initial
- Sets width or height to the default value.
- Inherit
- The width or height will be inherited from the parent.
Max-width and Max-height
This is where things get interesting. The max-width and max-height properties do what they sound like they would—they restrict an element to a predefined maximum size.
Max-width
To have a responsive image, the width of an image is usually set to 100% and height set to auto, and then a max-width is set to the actual width of the image so the it isn't blown up to full screen size.
Here's an example. The image to the right is actually twice the size you see. You can download it to see for yourself. If you resize your browser window small enough you'll see the image shrinks to fit.
Here's the actual inline code I used for that image:
style="float: right;
width: 100%;
height: auto;
max-width: 300px;
margin-left: 20px;"
alt="max-width example image">
Max-height
The max-height property sets the maximum height of an element. It prevents the value of the height property from becoming larger than the value specified for max-height. An example us usage might be to prevent an image from becoming too large and distorted if someone zooms in on the page.By combining max-height with overflow: auto or overflow: scroll you can create scrollable sections within an element. When the content within the element exceeds the specified max-height, a scrollbar will appear, allowing users to scroll through the overflowing content. At the same time, it's keeps the element's height limited to preserve your design.
Some search engines will only crawl to two or three levels deep on your site. By creating a site map which lists every page of your site and linking to it from your index page, you ensure that even the search engines that limit the depth that their spiders crawl will still find all your pages. Here's how those search engine see your site:
Top: Index page
Level One: Site Map (and any page linked-to from your index page)
Level Two: All your pages, if you have a site map on level one.
Level Three: Who Cares! You win!
This could be a neat option where you want to include "side notes" about the content but don't want to take up a lot of space for those who don't want or need the side notes.
Min-width and Min-height
You've probably got a good idea about these two properties, so I won't go into detail. They obviously set the minimum width and minimum height for an element. You needn't use them together, either one can be used on its own.One potential use could be to prevent an image with data or instructions from becoming so small it's not usable on small screens. Instead, make it scrollable!
CSS Width and Height Properties
To summarize, here are all the CSS width and height properties:- Width
- Sets the width of an element.
- Min-width
- Sets the minimum width of an element.
- Max-width
- Sets the maximum width of an element.
- Height
- Sets the height of an element.
- Min-height
- Sets the minimum height of an element.
- Max-height
- Sets the maximum height of an image.
As you can see, there's much more control available using CSS properties than there is with HTML attributes. Plus, that control extends to more selectors. [ A CSS selector is an HTML element by another name. ]
Units of Length
In CSS, width and height can be measured in several ways, both absolute and relative.
| Absolute Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches |
| px | pixels (relative to viewing device) |
| pt | points |
| pc | picas |
| Relative Unit | Description |
|---|---|
| em | relative to font size |
| rem | relative to root element font size |
| vw | relative to 1% width of viewport |
| vh | relative to 1% height of viewport |
| vmin | relative to viewports smallest dimension |
| vmax | relative to viewports largest dimension |
| % | relative to parent element |
The units are all coded the same. Give the number followed by the unit with no space between them. Example:
As I often say (in writing), one of the best ways to learn is by doing. If I might make a suggestion, don't just read this and go on to some other thing, play around with it a bit now and see for yourself how it works.
