Read: 04 - HTML Links, JS Functions, and Intro to CSS Layout

How are elements laid out by default?

The process begins as the boxes of individual elements are laid out in such a way that any padding, border, or margin they happen to have is added to their content. This is what we call the box model.

By default, a block level element’s content fills the available inline space of the parent element containing it and grows along the block dimension to accommodate its content. The size of Inline elements is just the size of their content. You can’t set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element (e.g., with display: block; or display: inline-block;, which mixes characteristics from both).

That explains how elements are structured individually, but how about the way they’re structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser’s viewport. By default, block-level elements are laid out in the block flow direction, which is based on the parent’s writing mode (initial: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that’s been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.

Inline elements behave differently. They don’t appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn’t space, then the overflowing content will move down to a new line.

If two vertically adjacent elements both have a margin set on them and their margins touch, the larger of the two margins remains and the smaller one disappears. This is known as margin collapsing. Collapsing margins is only relevant in the vertical direction.

Let’s look at a simple example that explains all of this:

Basic document flow

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

By default we span 100% of the width 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.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

Inline elements like this one and this one sit on the same line along with adjacent text nodes, if there is space on the same line. Overflowing inline elements will wrap onto a new line if possible (like this one containing text), or just go on to a new line if not, much like this image will do:

body { width: 500px; margin: 0 auto; }

p { background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; }

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

Where do I find functions?

In JavaScript, you’ll find functions everywhere. In fact, we’ve been using functions all the way through the course so far; we’ve just not been talking about them very much. Now is the time, however, for us to start talking about functions explicitly, and really exploring their syntax.

Pretty much anytime you make use of a JavaScript structure that features a pair of parentheses — () — and you’re not using a common built-in language structure like a for loop, while or do…while loop, or if…else statement, you are making use of a function.

Built-in browser functions

We’ve used functions built in to the browser a lot in this course.

Every time we manipulated a text string, for example:

const myText = ‘I am a string’; const newString = myText.replace(‘string’, ‘sausage’); console.log(newString); // the replace() string function takes a source string, // and a target string and replaces the source string, // with the target string, and returns the newly formed string Copy to Clipboard Or every time we manipulated an array:

const myArray = [‘I’, ‘love’, ‘chocolate’, ‘frogs’]; const madeAString = myArray.join(‘ ‘); console.log(madeAString); // the join() function takes an array, joins // all the array items together into a single // string, and returns this new string

Or every time we generate a random number:

const myNumber = Math.random(); // the random() function generates a random number between // 0 and up to but not including 1, and returns that number

We were using a function!