We can show or hide an element by using visibility property or display property.
To hide an element, set the display property to "none" or the visibility property to "hidden".
visibility:hidden hides an element,
but the element is still occupy the space and affect the layout.
h1.hidden {
visibility: hidden;
}
display:none hides an element,
and removes the element from the layout.
h1.hidden {
display: none;
}
A block element tries to take the whole width and starts a new line in the layout. Some of the HTML elements are block elements or block level elements.
<h1>, <p>, <li>, <div> are all examples of
block element.
An inline element stays in the same line with other inline elements and does not start a new line.
<a>, <span> are examples of inline elements.
We can use the display property to change the block or inline feature.
The following code makes a li element to display as inline element. Rather than starting a new line as normal li element, it shows the li element in the same line.
li {
display: inline;
}
The following code makes the span element to display as block element. Now each span element would act like div element, which is a block element by default.
span {
display: block;
}
The inline-block value mixes block and inline characteristics.
The outside of the box is treated like an inline element. Therefore no new line is created for the element.
The inside of the box is treated like a block element, and properties such as width, height, and margin are applied.
The following code shows how to use the inline-block Value.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from ww w .j a va 2 s .c o m-->
display: inline;
}
span {
display: inline-block;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test. <span>This is a test.</span>
</p>
</body>
</html>