What is the difference between paddingHorizontal/paddingVertical and paddingTop/Left/Right/Bottom?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid React Native basics — a prerequisite for any developer role.
Answer
React Native provides several shorthand properties for spacing that aren't available in standard CSS: Shorthand properties: // Vertical = top + bottom: paddingVertical: 16 // Same as: paddingTop: 16, paddingBottom: 16 marginVertical: 8 // Horizontal = left + right: paddingHorizontal: 20 // Same as: paddingLeft: 20, paddingRight: 20 marginHorizontal: 12. Individual sides: paddingTop: 8 paddingRight: 16 paddingBottom: 8 paddingLeft: 16. padding (all sides): padding: 16 // All four sides margin: 8 // All four sides. Priority (most specific wins): // paddingHorizontal overrides padding for left/right: padding: 20 paddingHorizontal: 0 // Result: top=20, bottom=20, left=0, right=0. Start/End (for RTL support): paddingStart: 16 // Same as paddingLeft in LTR, paddingRight in RTL paddingEnd: 16 // Same as paddingRight in LTR, paddingLeft in RTL. Use Start/End instead of Left/Right when building apps with RTL language support (Arabic, Hebrew). borderRadius shortcuts: borderRadius: 8 // All corners borderTopLeftRadius: 8 borderTopRightRadius: 8 borderBottomLeftRadius: 0 borderBottomRightRadius: 0. These are React Native-specific shorthands — not all are available in web CSS. The marginVertical and paddingHorizontal shorthands are particularly useful for reducing repetition in StyleSheet definitions.
Pro Tip
Back up your answer with a specific project or situation. Saying 'In my last React Native project, I used this when...' immediately makes your answer more credible and memorable.