CSS Dimension,CSS Display Property,CSS float and CSS Align Property

0 50

CSS Dimension Display Property float Align Property Elements

in this tutorial, we will talk on CSS Dimension Display Property float Align Property Elements

Dimension

CSS Dimension property control height and width of and element.

CSS Dimension Properties..

Property Values Description
height Auto "Length" "%" "inherit" height property will define height of element.
max-height none "Length" "%" "inherit" max-height property will define max height of element.
max-width none "Length" "%" "inherit" max-width property will define max width of element.
min-height Length "%" "inherit" min-height property will define minimum height of element
min-width Length "%" "inherit" min-width property will define minimum width of element.
width Auto "Length" "%" "inherit" width element property defines width of an element.

CSS Display Property

Display property

Through display property we can control page layout it is important property to hide or show element through java in HTML page.
Display property specifies that how to show an element in a page.

Block-level Elements

Block level elements always take full width available by starting on a new line.

Example of block level elements are

  • <div>
  • <h1>
  • <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline Elements

Inline Elements takes only width as much as necessary and it does not start on a new line.

Examples of inline elements are.

  • <span>
  • <a>
  • <img>

Display:none;

Display non property used to hide and show element with JavaScript.

Hide an Element – display:none or visibility:hidden?

By using display:none; we can hide any element is HTML page.

Visibility:hidden also do the same work it will hide the element but it will take space on the page as before.

CSS float

With float property, we can float our element on the page right or left to give the specific place on a page.

Float property

For example, if we need text around the image or while creating nav in HTML, we use float property on an image or on li list to float left or right.

The Clear property

In CSS clear property used to control the behavior of floating element.

The clearfix Hack – overflow: auto;

To stop any element which is floating outside the container overflow: auto; is used to stop its floating outside the container.

CSS Align Property

CSS Align

We can use several properties in CSS to align any text or element like margin:auto; will specify our element in horizontally in the center of within its container.

CSS align using margin

Through margin property, we can be an element within its container.

Using position

Using position property we can align out element right and left. position: absolute; used to align.

Using float Right and left alignment

Float property also can use to align Right and left.while using float property always define margin and padding for body This will avoid visual differences in different browsers.

Comments

comments

Leave A Reply

Your email address will not be published.