6) CSS Layouts

There are two types of HTML element block level and inline . Each has a set of behavior that defines how a block of code displays on the web page.

Block Level:

  • It has Same height as the content contained between the tags
  • It takes the complete width of the container.
  • Always start with new line
  • Wrap inline element
  • Most HTML tags are block level like,

Inline Element:

  • Same height and width of their content.
  • All Element align side by side
  • It can nest only inline element
  • Example: , ,

Note: to check whether an element is inline or block add a border to that element. For Block level color will go to fill the whole container width and if it just spans the width of original content then it is inline element.

Example: Add some width and height to each element and check the result.

Edit code here

Width and height have by default no effect on an inline element. We can use display property to change that.

Change inline to block
display:block: to inline element. Inline element will now act as block level element.

Proporties of both inline and block
Display:inline-block will have property of both inline and block. The element with inline-block will adjust to width but will be displayed inline side by side.

Hide the content

Display:none will hide the content