Margin, padding, border in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add margin around the View component.

React Native

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={{ margin: [1] }}>
      <Text>Hello World</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A20

B'20px'

Cmargin

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '20px' instead of numbers.

Confusing margin with padding.

In React Native, margin values are numbers representing density-independent pixels. So, margin: 20 adds 20 units of margin around the View.

2fill in blank

medium

Complete the code to add padding inside the View component.

React Native

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: [1] }}>
      <Text>Welcome!</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

ApaddingHorizontal

B'10px'

C10

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '10px'.

Using margin instead of padding.

Padding in React Native is set using numbers without units. So padding: 10 adds 10 units of padding inside the View.

3fill in blank

hard

Fix the error in the code to add a red border to the View.

React Native

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ borderWidth: 2, borderColor: [1] }}>
      <Text>Border Example</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Ared

Brgb(255,0,0)

C#red

D'red'

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names without quotes.

Using invalid color formats like '#red'.

In React Native, color values must be strings. So borderColor: 'red' is correct. Without quotes, it causes an error.

4fill in blank

hard

Fill both blanks to add padding and margin to the View.

React Native

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ padding: [1], margin: [2] }}>
      <Text>Box with space</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A15

Bpadding

C10

D'10px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '10px'.

Using property names instead of values.

Padding and margin values are numbers without units. So padding: 15 and margin: 10 add space inside and outside the View respectively.

5fill in blank

hard

Fill all three blanks to add a blue border, padding, and margin to the View.

React Native

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ borderWidth: [1], borderColor: [2], padding: [3] }}>
      <Text>Styled Box</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A3

B'blue'

C12

DborderColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using color without quotes.

Using strings with units for numbers.

Using property names instead of values.

Use borderWidth: 3 for thickness, borderColor: 'blue' as a string for color, and padding: 12 as a number for inside space.

Practice

1. What does padding do in a React Native style?

easy

A. Adds space inside the element, between content and border

B. Adds space outside the element, between element and neighbors

C. Draws a line around the element

D. Changes the background color of the element

Solution

1. Step 1: Understand padding concept

   Padding adds space inside the element, pushing content away from the edges.

2. Step 2: Compare with margin and border

   Margin adds space outside the element; border draws a line around it.

3. Final Answer:

   Adds space inside the element, between content and border -> Option A

4. Quick Check:

   Padding = inside space [OK]

Hint: Padding is inside space; margin is outside space [OK]

Common Mistakes:

• Confusing padding with margin
• Thinking border adds space
• Mixing padding with background color

2. Which of the following is the correct way to add a 10 pixel margin to all sides of a View in React Native?

easy

A. { padding: 10 }

B. { marginLeft: 10, padding: 10 }

C. { borderWidth: 10 }

D. { margin: 10 }

Solution

1. Step 1: Identify margin syntax

   To add margin on all sides, use margin: 10.

2. Step 2: Check other options

   Padding adds inner space, borderWidth adds border thickness, and marginLeft only adds left margin.

3. Final Answer:

   { margin: 10 } -> Option D

4. Quick Check:

   margin: 10 adds margin all sides [OK]

Hint: Use margin: value for all sides margin [OK]

Common Mistakes:

• Using padding instead of margin
• Using borderWidth to add space
• Only setting marginLeft instead of all sides

3. What will be the visible effect of this style on a View?

{
  padding: 20,
  margin: 10,
  borderWidth: 5,
  borderColor: 'red'
}

medium

A. The View has no visible border but has padding and margin

B. The View has 20 pixels space outside, 10 pixels space inside, and no border

C. The View has 10 pixels space outside, 20 pixels space inside, and a 5 pixel red border

D. The View has a 5 pixel blue border with no padding or margin

Solution

1. Step 1: Analyze padding and margin values

   Padding: 20 adds space inside the View; margin: 10 adds space outside.

2. Step 2: Analyze border properties

   borderWidth: 5 adds a 5 pixel border; borderColor: 'red' colors it red.

3. Final Answer:

   The View has 10 pixels space outside, 20 pixels space inside, and a 5 pixel red border -> Option C

4. Quick Check:

   margin = outside, padding = inside, borderWidth + borderColor = border [OK]

Hint: Margin outside, padding inside, borderWidth + borderColor visible [OK]

Common Mistakes:

• Mixing padding and margin values
• Ignoring borderColor effect
• Assuming borderWidth is padding

4. Identify the error in this style code for adding margin and border:

{
  margin: 15,
  border: '2px solid black'
}

medium

A. Border color must be set separately from borderWidth

B. React Native does not support the 'border' shorthand property

C. Margin value must be a string, not a number

D. Margin cannot be set without padding

Solution

1. Step 1: Check margin syntax

   Margin: 15 is valid as a number for all sides.

2. Step 2: Check border property

   React Native does not support CSS shorthand like 'border: 2px solid black'. It requires separate properties: borderWidth and borderColor.

3. Final Answer:

   React Native does not support the 'border' shorthand property -> Option B

4. Quick Check:

   No 'border' shorthand in React Native [OK]

Hint: Use borderWidth and borderColor separately, no shorthand [OK]

Common Mistakes:

• Using CSS shorthand border property
• Thinking margin needs to be string
• Believing margin requires padding

5. You want a View with a 15 pixel red border, 10 pixels padding inside, and 20 pixels margin outside. Which style object achieves this correctly?

hard

A. { borderWidth: 15, borderColor: 'red', padding: 10, margin: 20 }

B. { borderWidth: 10, borderColor: 'red', padding: 20, margin: 15 }

C. { border: '15px solid red', padding: 10, margin: 20 }

D. { borderWidth: 15, borderColor: 'red', padding: 20, margin: 10 }

Solution

1. Step 1: Match borderWidth and borderColor

   Border should be 15 pixels thick and red, so borderWidth: 15 and borderColor: 'red' are correct.

2. Step 2: Match padding and margin values

   Padding inside should be 10, margin outside 20, so padding: 10 and margin: 20 are correct.

3. Step 3: Check other options for errors

   { borderWidth: 10, borderColor: 'red', padding: 20, margin: 15 } swaps padding and margin values; { border: '15px solid red', padding: 10, margin: 20 } uses unsupported border shorthand; { borderWidth: 15, borderColor: 'red', padding: 20, margin: 10 } swaps padding and margin values.

4. Final Answer:

   { borderWidth: 15, borderColor: 'red', padding: 10, margin: 20 } -> Option A

5. Quick Check:

   Correct border, padding, margin values [OK]

Hint: Match each property to its exact value carefully [OK]

Common Mistakes:

• Swapping padding and margin values
• Using CSS border shorthand
• Incorrect borderWidth or borderColor