Boxes everywhere
Let's draw colored rectangles!
Exercise 2
Copy the image displayed below, and open it in libreOffice Draw (or in Paint, if you use Windows).
This web page is actually made up with boxes, as in the exercise 1.
How many of them do you see? Draw a rectangle to represent each of the containers that wrap information.
Boxifying design
Udacity
CSS box model
Exercise 3
Click the image below to open the page in a new tab, then inspect the element in Google Chrome
- 'Play' with the margins and paddings, by changing their values in the nested boxes displayed in the Element Inspector (double-click on the digits).
- Download the archive that contains the HTML page and its style sheet, and add the appropriate declarations to set up the margins and paddings as follows:
- margins top and bottom: 20 pixels
- margins left and right: 30 pixels
- paddings top and bottom: 40 pixels
- paddings left and right: 10 pixels
We'll henceforth use the margin property in CSS, instead of the <br> tag in the HTML file.
Width and height of a 'box'
As mentioned previously, block-level elements fill up the page width. But how, then, to display them side by side, as in the exercise 1?
CSS fortunately allows us to set up the width and height of our boxes. Let's explore these properties on w3school.com ...
<< PreviousWords cloud created with tagul.com - images sourced from flickr.com