The Box Model

We could consider all the elements in the website a box. Yes, they are rectangular boxes, nesting in an other box, and lying beside an other box.

Here we use padding, border, and margin to manipulate the size of these boxes, and the space between them.

  • padding increases the space between the border of a box and the content of the box.
  • border adds space (even if it’s only a pixel or two) between the margin and the padding
  • margin increases the space between the borders of a box and the borders of adjacent (/əˈdʒeɪs(ə)nt/ adj.相邻的) boxes.

Be sure to study the diagrams carefully:
The picture showing the padding, border and the margin

Block vs Inline

CSS has two box types: block and inline boxes, which determine element behavior and interaction. The display property controls how HTML elements appear on the webpage.

  • block boxes:
    By default, block elements will appear on the pave stacked atop each other, each new element starting on a new line.

  • inline boxes:
    Inline elements, however, do not start a new line. Additionally, padding and margin behave differently on inline elements. In general, you do not want to try to put extra padding or margin on inline elements.

The middle ground inline-block

Inline-block elements behave like inline elements, but with block-style padding and margin. display: inline-block is a useful tool to know about.

Divs and spans

Divs and spans are special as they give no particular meaning to their content. They are just generic boxes that contains anything.

The normal fow

The normal flow means the default layout of an HTML file when it is rendered by a browser without any CSS code to change the style and position of it.

See this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h1>Basic document flow</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
    lines below me.
</p>

<p>
  By default we span 100% of th ewidth of our parent element, and we are as tall
    as our child content. Our total width and height is our content + padding + 
    border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are 
  separated by the size o four margins, not both.
</p>

<p>
  Inline elements <span>like this one</span> and <span>this one</span> sit on 
  the same line along with adjacent text nodes, if there is space on the same line. Over flowing inline elements will <span>wrap onto a new line of passible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="snippet of cloth"/>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgb(255 84 104 / 30%);
  border: 2px solid rgb(255 84 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}

The layout:
pVeVgII.png

The difference between inline an block-inline

Compared to display: inline, the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are.

Here we could see the common block-level elements in HTML:
w3school