Scribd
Upload
10 views11 pages

06 - Properties - Height and Width

The document discusses the CSS properties of height and width, including their min and max variants, which define the size of elements. It explains how these properties interact with content, overflow, and the box-sizing property, emphasizing the importance of maintaining consistent UI elements. Additionally, it provides practical tips and use cases for implementing these properties effectively in web design.

Uploaded by

kobolnikolas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views11 pages

06 - Properties - Height and Width

The document discusses the CSS properties of height and width, including their min and max variants, which define the size of elements. It explains how these properties interact with content, overflow, and the box-sizing property, emphasizing the importance of maintaining consistent UI elements. Additionally, it provides practical tips and use cases for implementing these properties effectively in web design.

Uploaded by

kobolnikolas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Learn CSS By Use Cases

ebook by Joe Harrison

Properties
height &

width
Along with
min-height max-height min-width max-width
height & width
Properties

Intro

In CSS, height and width (along with their min


and max variants) define the size of an element.
They do not include any padding or border in
their actual dimensions unless you have
enabled box-sizing: border-box on the element.

Syntax

All properties accept any length value


(excluding fractions) as well as the keyword
“auto”, which is the default value. In these
properties “auto” means that the size will be
defined by either it’s parent container or the
content it contains.
height & width
Properties

Special Power

Width arguably has a bit more power than


height as its more commonly used. Height is
often derived by the content of the element, but
it’s very useful when sizing images and keeping
UI components consistent.

Tips

If height or width is set to a value like px, rem or


%, then content can potentially overflow. The
way content overflows will be defined by the
overflow property of the parent element. Both
min and max properties will override any width
and height values.
height
Uniform controls

Consistent
height lengths
create clean
elegant UI

We could clean this code up by creating a .form-


control class and apply it to both elements
min-height
Preserve element height

May need

min-height
Oops, we have Address details
encountered an have been saved!
unexpected error!

.alert

To ensure an element does not get squashed by any styling defined


by the parent we set min-height (and max-height in some cases)
max-height

Collapsible panels

.panel .panel.open

Expand/collapse Expand/collapse

You have just built your

first custom made

collapsible panel in

pure css

I transition the max-height property from 0 to a high number.

I’ve used 1000px but you can lower it depending on the content
width
Stretched form controls

Login

.form-control Username

.form-control Password

.form-control Let’s go parent

The width
percentage here
will be relative to
it’s parent element

It’s good practice to create a resuable class that can be


added to various form elements and controls
max-width
Text overflow with ellipsis

When using ...


it’s good
practice to
show the full
value in a
tooltip

You’ll find this use case in my source code. It’s important


as it has all the other vital properties involved
min-width
Avoid controls being too small

Ok Back Ok Back

.button

Smaller buttons are more difficult to press so it’s a


good practice to set a minimum width
width, min and max
Fixed width elements

We can achieve the same with height properties too


height & width
Properties

Knowledge Gained

Defines the size of an element

Height and width values do not include

padding, margin or borders

However, the box-sizing property makes

working with heights and widths easier

Width is usually a defined value where as

height, is usually defined by it’s content

Both are involved heavily when working

with how an element overflows

You might also like