All elements in our HTML page are rendered as a rectangle (or square), even circles, as you will soon see. Let's explore how we can affect elements and our page's layout by setting parameters for a box.
Let's change the shape of our box.
- Set the
width
of our .box to 300px - Set the
height
of our .box to 300px
Width and height refer to the shape of the content of our box. Note the default value of auto
for width/height, behaves differently for each property respectively.
Our box's content is rather close to the edges of the .box. Let's give ourselves a bit more breathing room.
- Set the
padding
of our .box to 15px
Note the physical size of our box has changed. Imagine scenarios where this might be problematic. Also notice the area around the .box that's been added takes the same colour of the background of the .box
This box looks great, but we need to give our .box something around the edge.
- Set a
border-width
,border-style
,border-color
to3px solid #000000
respectively. - Combine these properties together as a single
border
- Change the border's style to one of dashed, dotted or double.
- Give the box a border-radius of 5px
- Try changing the border-radius to 50%
Notice once again that the physical size of our box has changed.
- Set the
box-sizing
to border-box - Set this property to all elements going forward with the
*
selector
Note the physical size of our box is now dictated by our content properties (width/height)
- Set the margin of our .box to 20px
Note the box moves out of it's physical place in the layout. Using our developer tools, notice that the box takes a margin all the way around. Nothing else can get into that space. Also notice something strange is happening to the right of the box.
Each of padding
, border-width
and margin
can be set for each of the box's sides individually: top, right, bottom, left
- Set
padding-top
,padding-right
,padding-bottom
,padding-left
to different sizes - Set
border-top-width
,border-right-width
,border-bottom-width
,border-left-width
to different sizes - Set
margin-top
,margin-right
,margin-bottom
,margin-left
to different sizes - Abbreviate the original
padding
,border-width
,margin
with 2, 3, and 4 numbers
Remember the extra margin that ended up at the right of our box?
- Set the
margin-left
andmargin-right
to auto
This works to center all display:block
elements within their container
We can also now consider our .box the first building block of our layout.
- Set the width of our element to a %
- Set the
max-width
of of our element to 800px
Notice we now have a layout that has responsive properties
In general, we don't ever want to restrict the height of our content such that we may have content that spills outside of it's boundaries.
- Add some
lorem
ipsum to our box to ensure the content goes beyond the height of our box - Set the
overflow
of our box to hidden - Set the
overflow
of our box to scroll