HTML and CSS Reference
In-Depth Information
1.
<section class="row">
2.
<div class="grid">
3.
4.
<section class="venue-theatre">
5.
...
6.
</section>
7.
8.
<section class="venue-hotel">
9.
...
10.
</section>
11.
12.
</div>
13.
</section>
3.
Now that we have a few classes to work with, let's create a new section within our
main.css
file for Venue page styles. We'll add a
66
-pixel
margin
to the bot-
tom of the
<section>
element with the
class
attribute value of
venue-
theatre
to insert some space between it and the
<section>
element below it.
Then, we'll add a
22
-pixel
margin
to the bottom of the
<section>
element
with the
class
attribute value of
venue-hotel
to provide some space between
it and the
<footer>
element below it.
The new venue section within the
main.css
file looks like the following:
1.
/*
2.
========================================
3.
Venue
4.
========================================
5.
*/
6.
7.
.venue-theatre {
8.
margin-bottom: 66px;
9.
}
10.
.venue-hotel {
11.
margin-bottom: 22px;
12.
}
The
<section>
element with the
class
attribute value of
venue-hotel
has
a smaller bottom
margin
than the
<section>
element with the
class
attrib-
ute value of
venue-theatre
because it sits next to the
padding
from the bot-
tom of the
<section>
element with the
class
attribute of
row
. Adding that
margin
and
padding
together gives us the same value as the bottom
margin
Search WWH ::
Custom Search