---
title: "Frontend Logs: html/css Key Notes"
description: "Study notes\nThe difference between margin and padding"
author: "kidneyweakx"
published: 2019-03-13T00:00:00.000Z
updated: 2026-06-02T17:15:20.159Z
lang: en
tags: ["程式筆記", "html"]
canonical: https://kidneyweakx.com/blog/19log-0313-html-note?lang=en
alternate_zh_tw: https://kidneyweakx.com/blog/19log-0313-html-note.md
alternate_ja: https://kidneyweakx.com/blog/19log-0313-html-note.md?lang=ja
---

# Frontend Logs: html/css Key Notes

### Study notes

> The difference between margin and padding

Position is their biggest difference
margin is the outer spacing; it can be negative. Also called "fill"
padding is the inner spacing. Also called "blank edge"

<br />

> What is the box model

The box model is how an element is handled, made up of the border, margin (outer spacing), padding (inner spacing), and the element's content.

<br />

> Why use em instead of px to define font size

So text can be resized in Internet Explorer
em lets you change text size in every browser; px doesn't in some browsers
px is the unit for adjusting spacing

<br />

> For h1 {margin : 10px 0px 15px 5px;}, what are margin-top, margin-right, margin-left, and margin-bottom?

They go in clockwise order

* top 10px

* right 0px

* bottom 15px

* left 5px

### extra

* If the **left margin** value is missing, the **right margin** value is used.

* If the **bottom margin** value is missing, the **top margin** value is used.

* If the **right margin** value is missing, the **top margin** value is used.