Width and Height

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

Width and Height are the dimensions of a physical box. Each and everything (button, text block, image etc) present in CSS is treated as block. And by default, they attemp tto shrink to fit the content or expand to fill out their container. And this is the breakdown of how we command those dimensions.

The Basic Dimensions

The easiest form of size is in fixed units or relativeunits.

Width : It is the size of that element from left to right.
Height – The element’s top to bottom distance.

The rule: It’s very unusual that we apply a fixedheight to boxes of text in modern web design. The following example is with a fixed height — when the text becomes too long (e.g. on more narrow screens) it will just “overflow” the container. It’s usually smarter to let the height adjust itself.

The “Safety Nets” (Min & Max)

This is where you start stepping into responsive-design territory. Instead of handing the browser just one size, you hand it a range.

Max-Width & Max-Height
Definition: “You can grow as much as you would like, but do not exceed the limit of this.”
Use case: You have a huge image. Caveat if you use max-width: 100% the image will shrink down when displayed on a small screen. It will not expand outside of its bounding limit and destroy your layout.

Min-Width & Min-Height
Definition: “Feel free to grow, but don’t drop below this size.”
Use Case: Fat > Imagine a “Contact Us” button for your web site. If you do min-width: 120px – it will never turn into a tiny dot you only occasionally reach on your mobile.

The “Content” Secret: auto

Finally in CSS the value of width and height is auto by default.

Width: auto; Typically means “Expand horizontally to take up available space.”
Height: auto; Sounds like “Adjust your height to the content inside you.”

This is the default behavior that makes web layouts fluid by design.

Understanding Units

Knowing which measuring tool to choose is essential to having complete mastery of width and height:

px (Pixels): A unit of measurement with a definite size. Ideal for edge work or small detail spacing.
% (Percent) A percentage of the containing parent. Great for flexible columns such as width: 50%.
vw / vh: portion of the viewport (the visible screen). Good for full screen sections such as height: 100vh.
em / rem: Based on font size. Great for padding and spacing that should scale with your text.

The “Gotcha”: Box Sizing

Here’s where many layouts break.

By default, If I set width: 200px and then add padding: 20px (gives me an additional.5em placeholder), the ‘.inner’ will be wide a total of 240px. A padding is deducted from the specified width.

In order to avoid this, it’s nearly always the case that developers have to include this ‘magic’ rule:

CSS

{
box-sizing: border-box;
}

Why? Because this tells the browser, “When I say 200px wide, what I’m referring to is the whole box — padding and border included.”