CSS Box Types
There are two types of boxes, block and inline. Block boxes would include elements such as <p> or <div>, while inline boxes would include tags such as <strong> or <span>, as well as content like text and images.
A block box acts like a container. The point of these container boxes is to determine the position of the boxes within it, and sometimes the dimensions of these boxes. Take the following code for example:
<style type="text/css">
.box {
width:500px;
}
p {
width:50%;
}
</style>
<div class="box">
<p>This is a paragraph.</p>
</div>
Because we set the paragraph with a width of 50% and the containing box to 500px, the paragraph will actually only be 250px. Now if we take the containing box out of the picture, and we only had a paragraph there, the paragraph would actually be half the size of the browser window since there is no containing box for it to get its dimensions from.
You should note that this only works with elements and not tags. However, if you set a tag to display as a block, it will work the same way. Let’s take a look at how that works:
<style type="text/css">
.box {
width:500px;
}
strong {
width:50%;
width:500px;
}
</style>
<div class="box">
<strong>This is bold text.</strong>
</div>
Because we set the <strong> tag to display:block, it will now only fill half of the containing box. If we didn’t change the display to block, it would stay at its default setting as an inline box and the width setting wouldn’t work.
