Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Height

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Height

      The height property sets the height of an element's content area. In case, the box-sizing is set to border-box, the property height sets the height of the border area.
      The value specified by the height property gets oevrriden by the values defined by min-height and max-height properties.
      

      Possible Values

      • length − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
      • percentage − A percentage of the height of the containing element.
      • auto − The browser will calculate the height automatically based on the content. It is the default value.
      • max-content: Defines the intrinsic preferred height.
      • min-content: Defines the intrinsic minimum height.
      • fit-content: Available space will be used by box, but never exceeds the max-content.
      • fit-content (<length-percentage>): Fit-content formula is used, i.e, min(max-content, max(min-content, <length-percentage>)).
      • clamp(): Enables selection of a middle value within a range of values, specified between minimum and maximum height.
      Negative values like height: -200px are not accepted.

      Applies to

      All the HTML elements except non-replaced inline elements, table columns, and column groups.

      DOM Syntax

      object.style.height = "100px";

      CSS Height - Length Unit

      Here is an example of adding height to a div element in length units:
      <html>
      <head>
      <style>
         div {
            border: 1px solid black;
            margin-bottom: 5px;
         }
         div.a {
            height: 100px;
            background-color: rgb(230, 230, 203);
         }
         div.b {
            height: 2.5in;
            background-color: rgb(230, 230, 203);
         }
      </style>
      </head>
      <body>
         <div class="a">This div element has a height of 100px.</div>
         <div class="b">This div element has a height of 2.5 inches.</div>
      </body>
      </html>

      CSS Height - Percentage value

      Here is an example of adding height to a div element in percentage values:
      <html>
      <head>
      <style>
         div {
            border: 1px solid black;
            margin-bottom: 5px;
         }
         div.a {
            height: 80%;
            background-color: rgb(230, 230, 203);
         }
         div.b {
            height: 120%;
            background-color: rgb(236, 190, 190);
         }
      </style>
      </head>
      <body>
         <div class="a">This div element has a height of 80%.</div>
         <div class="b">This div element has a height of 120%.</div>
      </body>
      </html>

      CSS height - auto value

      Here is an example of adding height to a div element set as auto:
      <html>
      <head>
      <style>
         div.auto {
            height: auto;
            background-color: yellow;
            padding: 20px;
            margin-bottom: 5px;
         }
      </style>
      </head>
      <body>
         <div class="auto">This div element has a height set as auto.</div>
      </body>
      </html>

      CSS Height - Using max-content and min-content

      Here is an example of height equal to max-content and min-content:
      <html>
      <head>
      <style>
         div {
            border: 1px solid black;
            margin-bottom: 5px;
         }
         div.c {
            height: max-content;
            background-color: bisque;
         }
         div.d {
            height: min-content;
            background-color: darkseagreen;
         }
      </style>
      </head>
      <body>
         <div class="c">This div element has a height as max-content. This div element has a height as max-content.
         This div element has a height as max-content. This div element has a height as max-content. This div element has a height as max-content.</div>
         <div class="d">This div element has a height of min-content.</div>
      </body>
      </html>

      CSS Height - Image

      Here is an example of adding height to an image:
      <html>
      <head>
      <style>
         .demoImg {
            margin-top: 15px;
            height: 200px;
            margin-right: 0.5in;
         }
      </style>
      </head>
      <body>
         <img class="demoImg" src="images/scancode.png" alt="image-height">
      </body>
      </html>

      CSS Height - Using clamp()

      Here is the example where clamp() function is used for setting height:
      <html>
      <head>
      <style>
         p{
            display: inline-flex;
            border: 1px solid black;
            background-color: yellow;
            height: clamp(20px, 100px, 180px);
            width: clamp(50px, 100px, 200px);
            padding: 1em;
            margin: 2em;
         }
      </style>
      <body>
         <div>
            <p>The clamp function is used for height & width, where the background color is selected for the value between the
            min and max ranges of height and width.</p>
         </div>
      </body>
      </html>

      CSS Height - Related Properties

      Following is the list of related CSS properties of height:
      property
      value
      max-height
      Sets an upper bound on the height of an element.
      min-height
      Sets a lower bound on the height of an element.
      min-content
      Sets intrinsic minimum height of the content.
      max-content
      Sets intrinsic maximum height of the content.
      fit-content
      Fits the content depending on the available size.
      fit-content()
      Clamps a given size based on the formula min(maximum size, max(minimum size, argument)).
      Print Page