HTML and CSS Reference
In-Depth Information
Another way to remove the white space between inline-block elements is to open an HTML
comment directly after an inline-block element's closing tag. Then, close the HTML com-
ment immediately before the next inline-block element's opening tag. Doing this allows
inline-block elements to begin and end on separate lines of HTML and “comments out”
any potential spaces between the elements. The resulting code would look like this:
1.
<header>...</header>
2.
<section>
3.
...
4.
</section><!--
5.
--><section>
6.
...
7.
</section><!--
8.
--><section>
9.
...
10.
</section>
11.
<footer>...</footer>
Neither of these options is perfect, but they are helpful. I tend to favor using comments for
better organization, but which option you choose is entirely up to you.
Creating Reusable Layouts
When building a website, it is always best to write modular styles that may be reused else-
where, and reusable layouts are high on the list of reusable code. Layouts can be created
using either floats or inline-block elements, but which works best and why?
Whether it's better to use floats or inline-block elements to lay out the structure of a page
is open to debate. My approach is to use inline-block elements to create the grid—or lay-
out—of a page and to then use floats when I want content to wrap around a given element
(as floats were intended to do with images). Generally, I also find inline-block elements
easier to work with.
That said, use whatever works best for you. If you are comfortable with one approach over
the other, then go for it.
Currently there are new CSS specifications in the works—specifically
flex-
and
grid
-
based properties—that will help address how to best lay out pages. Keep an eye out for
these methods as they begin to surface.
In Practice
With a solid understanding of reusable layouts, the time has come to implement one in our
Styles Conference website.
Search WWH ::
Custom Search