Display

{ display: }

Most HTML elements are displayed as block elements. This means that regardless of the width of the content, it takes up the entire width of the page. The display property can be set to block, inline-block, or none. If you want an element to only take up enough space to fit the content and allow other elements to layout next to each other, then set display to inline-block. If display is set to none, then it removes the element from that space. Don't worry about this now, but it will be useful later when you use javascript to fade elements in and out.

One

Two

HTML

<p id='one' >One</p>

<p id='two'>Two</p>

CSS

#one {

display:
;


}



#two {

display:
;


}


You'll find there are plenty of odd, annoying quirks with coding. The display property has one of those. Often when you set display to inline-block you'll see that unwanted white space is added between elements. To remove this space you need to set the font-size to 0 for the element that contains the inline-block elements. You can also set the dispaly to inline, different from inline-block, but its not as useful so don't really worry about it now. It behaves similarly to inline-block, but it only takes up as much space as is needed for the content and you can't change its size. With inline-block you can still set the width and height properties as you wish.