- CSS Introduction
- CSS Syntax
- CSS Selectors
- How To Add CSS
- CSS Comments
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height - Width
- CSS Box Model
- CSS Outline
- CSS Text
- CSS Links
- CSS Lists
- CSS Tables
- CSS Display
- CSS Max-width
- CSS Position
- CSS Overflow
- CSS Float
- CSS Inline-block
- CSS Align
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Image Gallery
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS Website Layout
- CSS !important
- CSS Rounded Corners
- CSS Border Images
- CSS Backgrounds
- CSS Colors
- CSS Color Keywords
- CSS Gradients
- CSS Radial Gradients
- CSS Text Effects
- CSS Web Fonts
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Tooltip
- CSS Image Reflection
- CSS The Object-fit
- CSS Object-position
- CSS Button
- CSS Pagination
- CSS Multiple Columns
- CSS User Interface
- CSS Variables
- CSS Box-sizing
- CSS Media Queries
- CSS Flexbox
CSS Height - Width
CSS Setting Height And Width
The CSS height and width properties are used to set an element's height and width.
The CSS max-width property is used to set an element's maximum width.
CSS Setting height and width
The height and width properties are used to set an element's height and width.
Not included in the height and width properties are padding, borders, or margins. It specifies the height and width of the area within the element's padding, border, and margin.
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 widthlength
- Defines the height/width in px, cm etc.%
- Defines the height/width in percent of the containing blockinitial
- Sets the height/width to its default valueinherit
- The height/width will be inherited from its parent value
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color:blue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
Setting Max-width
The max-width property is used to set an element's maximum width.
The max-width property can be specified in length units such as pixels, centimetres, etc., in percentage (%) of the containing block, or set to none (the default). Does not indicate a maximum width).
The issue with the preceding div> occurs when the width of the browser window is less than the width of the element (500px). After that, the browser adds a horizontal scrollbar to the page.
Using max-width instead will improve the browser's handling of small windows in this situation.
Note: If you use both the width property and the max-width property on the same element and the width property's value is greater than the max-width property's value, the max-width property will be used and the width property will be ignored.
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color:blue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 120px and a max-width of 550px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP