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
      PX to EM converter

      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.

      PX to EM Conversion

      Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, you should use the following formula:
      em = px / font-size
      Note: Default font-size is 16px. So while converting the px to em, you need to select your base value (default is 16) for the pixel and use it in the formula to calculate.

      CSS PX to EM Conversion Table

      Following table shows the corresponding em values to px values, considering the base pixel value as 16px:
      PX
      EM
      5px
      0.3125em
      6px
      0.3750em
      7px
      0.4375em
      8px
      0.5000em
      9px
      0.5625em
      10px
      0.6250em
      11px
      0.6875em
      12px
      0.7500em
      13px
      0.8125em
      14px
      0.8750em
      15px
      0.9375em
      16px
      1.0000em
      17px
      1.0625em
      18px
      1.1250em
      19px
      1.1875em
      20px
      1.2500em
      The table above shows just few sample values, you may convert any px value to em, using the formula.

      Conversion Calculator

      Refer the calculator to convert px to em and vice-versa.

      PX to EM Converter

      Enter px: 
      Result in em:
      Enter em: 
      Result in px: