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
      Min Inline Size

      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.

      min-inline-size

      CSS min-inline-size property specifies the minimum horizontal or vertical size of an element's block, determined by its writing mode and equivalent to either min-height and min-width based on the writing mode value.

      Possible Values

      The min-inline-size property accepts the same values as min-height and min-width.

      Applies To

      Same as width and height.

      Syntax

      <length> Values

      min-inline-size: 100px;
      min-inline-size: 5em;

      <percentage> Values

      min-inline-size: 10%;

      Keyword Values

      min-inline-size: max-content;
      min-inline-size: min-content;
      min-inline-size: fit-content;
      min-inline-size: fit-content(20em);
      The min-inline-size property sets the minimum width for horizontal writing modes and the minimum height for vertical writing modes, respectively. A companion property, min-block-size defines the other dimension.

      CSS min-inline-size - <length> Value

      The following example demonstrates the min-inline-size: 200px property sets the minimum width of the inline element to the 200px 
      <html>
      <head>
      <style>
         .box {
            background-color: greenyellow;
            border: 3px solid red;
            display: inline-block;
            min-inline-size: 200px;
         }
      </style>
      </head>
      <body>
         <p class="box">CSS min-inline-size</p>
      </body>
      </html>

      CSS min-inline-size - <percentage> Value

      The following example demonstrates the min-inline-size: 30% property sets the minimum width of the inline element to the 30% 
      <html>
      <head>
      <style>
         .box {
            background-color: greenyellow;
            border: 3px solid red;
            display: inline-block;
            min-inline-size: 30%;
         }
      </style>
      </head>
      <body>
         <p class="box">CSS min-inline-size</p>
      </body>
      </html>

      CSS min-inline-size - max-content Value

      The following example demonstrates the min-inline-size: max-content property allows the inline element to expand horizontally to fit its content 
      <html>
      <head>
      <style>
         .box {
            background-color: greenyellow;
            border: 3px solid red;
            display: inline-block;
            min-inline-size: max-content;
         }
      </style>
      </head>
      <body>
         <p class="box">CSS min-inline-size</p>
      </body>
      </html>

      CSS min-inline-size - With Vertical Text

      The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction 
      <html>
      <head>
      <style>
         div {
            background-color: greenyellow;
            border: 2px solid blue;
            margin: 10px;
            padding: 5px;
            min-inline-size: 150px;
            writing-mode: vertical-rl;
         }
      </style>
      </head>
      <body>
         <div>
            <h3>CSS min-inline-size with writing-mode: vertical-rl.</h3>
         </div>
      </body>
      </html>