So "star 'crossed lovers" aside, what are we talking here? The Montague's and the Capulet's, two feuding merchant families (we never learn why as I recall), finally, tragically learn that they're essentially the same under those tights and impressive bustiers -- that their feud was a pointless, silly misunderstanding that only took a couple teenage deaths to resolve.
What can we learn from this?
Every HTML elements belong in one of two display families: block or inline.
The Blocks camp, aside from a predilection for wearing tight yellow spandex leggings, always begin "on a new line", they're always as wide as they possibly can be, and as tall as need be. They may have a width, height, border, padding, and margin.
The Inline clan prefers a more malleable, chill life -- squeezing into available nooks 'n crannies like sardines or grains of rice in a sack. They following one after the other in a line (as in "inline", get it?). Leading a simpler life they only require a border and left & right padding.
Here's a few HTML elements, listed by their display camp:
Block
- Headings (h1-h6)
- Paragraphs (p)
- Blockquotes
- Pre-formatted Text (pre)
- Lists (ul, ol, dl) & List Items (li, dt, dd)
- Forms & Fieldsets
- Tables
Inline
- anchors (a)
- strong
- emphasis (em)
- samples, codes, & keyboards (samp, code, & kbd)
- images (img) *
- labels, inputs, selects, & buttons *
* OK, there's a hybrid display camp -- the monk in Romeo & Juliet, if you will -- that doesn't choose sides.
Images and Form Elements are "replaced inline elements".
Browsers were born of an era in which text was about the coolest thing out there. OK, it was the only game in town. This was great until people actually wanted to do something on the web -- enter forms and images. To render these new hoity-toity content types (stuff other than just some text) browsers play a trick on themselves: they swap out some text equivalent (alt on images) for some control -- a control with dimensions.
You might have come across "inline-block" before? That's these kids. For this reason they -- unlike plain inline elements -- have widths... and height.
There's really only one rule: an inline element may not wrap a block element. Good:
<p>Hello, <strong>World</strong></p>
Bad (it'll work, but it won't validate):
<strong><p>Hollow, World?</p></strong>
Now, frequently we wish that an element belonged to the camp other than its default, that it'd switch loyalties. Fortunately 'tis easily achieved.
<style type="text/css">
a{
background-color: #00f;
display: block;
padding: .3em;
}
</style>
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="info.htm">Info</a></l1>
</ul>
That's the beginnings of a menu where the entire line is clickable, not just the text.
One of the more common frustrations encountered by people new to CSS centers around not appreciating that every element already has a display affinity, and that the different display modes come with limits. Specifically, folks are flummoxed when they can't set margin, width, and height on, say, an anchor. But if you know an anchor is an inline element you wouldn't expect to be able to, right? No more than you could convince a sack of rice to occupy more space than it needs to.If you want width and height, put that rice in a box, for Pete's sake, get it up off that filthy floor.
Wrapping Up
The best part of reading a Shakespeare is that you get a charcter list right up front. And in Romeo & Juliet they're even broken down by which side they'll be on: Montague or Capulet. This makes it easy for us to understand their behaviors and loyalties throughout the bewildering speeches and sword fights, that frankly, without Cliff's Notes, we'd never be able to follow.
But it's also great that we can reassign them and affect a happier ending to our little drama, no?