---
title: "CSS box model margin and padding"
subject: "Web Technology"
chapter: 2
key: "semester_7/web_technology:css-box-model-layout"
source: https://www.bctengineer.com/q/semester_7/web_technology/css-box-model-layout
site: BCT Engineering
---

# CSS box model margin and padding

Web Technology · Chapter 2: Web basics

- Asked in: 2074 Chaitra, 2+2+2 marks
- Video: [Learn CSS Box Model In 8 Minutes](https://www.youtube.com/watch?v=rIO5326FgPE) — Web Dev Simplified
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/css-box-model-layout
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-2

## Question

Given is the HTML code:

```html
<html>
<head>
</head>
<body>
  <div style="padding:10px;float:left;">
    <div id="leftbox" style="width:100px;height:100px;float:left;border: solid 1px;">
      ON LEFT
    </div>
    <div id="rightbox" style="width:100px;height:100px;float:left;border: solid 1px;">
      ON RIGHT
    </div>
  </div>
</body>
</html>
```

The output of the above code is: [Figure: two boxes side by side, one containing "ON LEFT" and the other "ON RIGHT", each with a 1px solid border]

Use CSS Box model (margin/padding) to do the following:
a. Separate left and right box by a total of 10 px
b. Move text "ON LEFT" by 10 px towards right
c. Move text "ON RIGHT" by 10 px towards right

## Short answer

Use margin-right:10px on the left box to separate the boxes by 10px. Use padding-left:10px on each box to move the text right. Adding box-sizing:border-box keeps the widths fixed.

## Answer

The CSS box model has content, padding, border and margin. **Margin** creates space *outside* the border (between boxes); **padding** creates space *inside* the border (between border and content).

```text
+-------------- margin --------------+
|  +---------- border ----------+    |
|  |  +------ padding ------+   |    |
|  |  |       content       |   |    |
|  |  +---------------------+   |    |
|  +----------------------------+    |
+------------------------------------+
```

#### a. Separate the boxes by 10 px
Put a right margin on the left box (or a left margin on the right box). Only one of them should get it, because two margins would give 20 px in total.
```css
#leftbox { margin-right: 10px; }
```

#### b. Move "ON LEFT" 10 px to the right
Use left padding on the left box so the text is pushed inside it.
```css
#leftbox { padding-left: 10px; }
```

#### c. Move "ON RIGHT" 10 px to the right
```css
#rightbox { padding-left: 10px; }
```

#### Complete code
```html
<html>
<head>
<style>
  #leftbox, #rightbox { box-sizing: border-box; }  /* keeps width 100px */
  #leftbox  { margin-right: 10px; padding-left: 10px; }
  #rightbox { padding-left: 10px; }
</style>
</head>
<body>
  <div style="padding:10px;float:left;">
    <div id="leftbox" style="width:100px;height:100px;float:left;border:solid 1px;">
      ON LEFT
    </div>
    <div id="rightbox" style="width:100px;height:100px;float:left;border:solid 1px;">
      ON RIGHT
    </div>
  </div>
</body>
</html>
```

The same rules can be written inline: `style="...;margin-right:10px;padding-left:10px"`. Note: without `box-sizing: border-box`, padding is added to the 100 px width (the box becomes 110 px wide plus border), which is also acceptable if the box size need not stay fixed.

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. What is the difference between margin and padding?
   A. Margin is inside the border; padding outside
   B. Both are inside the content
   C. Both are outside the border
   D. Margin is outside the border; padding is inside between border and content
   Answer: D. Margin separates boxes; padding pushes content inward. (Key point: Margin vs padding)

2. How to separate the boxes by a total of 10 px?
   A. Add margin-right: 10px to only the left box
   B. Add margin-right:10px to both boxes
   C. Add padding-left:10px to the right box
   D. Add border 10px
   Answer: A. Margin on both would give 20 px. (Key point: Part a)

3. How to move 'ON LEFT' 10 px right?
   A. margin-right: 10px on #leftbox
   B. padding-left: 10px on #leftbox
   C. margin-left: 10px on #rightbox
   D. padding-right: 10px on #leftbox
   Answer: B. Left padding pushes the text away from the left border. (Key point: Part b)

4. What does box-sizing: border-box do here?
   A. Removes the border
   B. Adds padding to the width
   C. Keeps the box width at 100px including padding
   D. Floats the box
   Answer: C. Without it padding adds to the width. (Key point: box-sizing)

## Related in Web Technology

- [Cascading Style Sheets (CSS)](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Acss-explained) — Web Technology, chapter 2
- [Document Object Model with HTML/JavaScript](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Adom-html-javascript) — Web Technology, chapter 4, asked 2×
- [HTML registration form with JS validation](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Aregistration-form-js-validation) — Web Technology, chapter 4

## Related in other subjects

- [Spillway model height, head and flow](https://www.bctengineer.com/question.md?key=semester_3%2Ffluid_mechanics%3Aspillway-model-height-head-flow) — Fluid Mechanics, chapter 10
- [Fleming's right and left hand rules](https://www.bctengineer.com/question.md?key=semester_4%2Felectrical_machine%3Afleming-hand-rules) — Electrical Machine, chapter 1
- [Left and right focal point ratios](https://www.bctengineer.com/question.md?key=semester_5%2Ftheory_of_structures_ii%3Afocal-point-ratios-left-right) — Theory of Structures II, chapter 4
- [TTL voltage profile and noise margin; Gray code](https://www.bctengineer.com/question.md?key=semester_3%2Fdigital_logic%3Attl-voltage-profile-noise-margin) — Digital Logic, chapter 10