Layout Before and After

If you don't add a proper layout, the web page tends to be scattered and unstructured. For example, block elements are stretched out to the right edge and piled downwards with line breaks, and inline elements simply follow the line flow. Also, the sizes of each element are not aligned and elements are crowded due to limited spacing.

By executing a proper layout, all elements are displayed in a well-structured way – the positions of each element are nicely coordinated horizontally and vertically, and sizes and spacing are well-managed.

When you use design software, executing an intended layout may be easier as its operations are visually intuitive. In HTML and CSS coding, you need to understand the characteristics of each HTML element and the functionalities of CSS properties.

In the coming topic pages, we'll explain key CSS properties to manage different types of HTML elements and overall page layout.

You can also learn this topic offline. Click .