Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Set margin for html element using CSS

The margin is a shorthand for margin-top, margin-right, margin-bottom, and margin-left in CSS.

Code example,

.nav-menu {
    /*set margin top 10px , margin right 5px,
      margin bottom 2px, margin left 5px */
    margin: 10px  5px 2px 5px;
}


The CSS margin-top property sets the top margin of an element.

Margin top example

.about-content {
    Margin-top: 10px;
}

 The CSS margin-bottom property sets the bottom margin of an element.

Margin bottom example

.footer-content {
    Margin-bottom: -5px;
}


The CSS margin-right property sets the right margin of an element.

Margin right example

 .left-menu{
    margin-right:2em;
}


The CSS margin-left property sets the left margin of an element.

Margin left example  

.right-content{
    margin-left:2%;

Properties of hyper link which signifies unvisited and visited hyperlinks

Following link pseudo classes signifies visited and unvisited links

  • Html element:link signifies unvisited hyperlinks.
  • Html element:visited signifies visited hyperlinks.

Note: A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).

Example

/* unvisited link */
a:link {
    color: blue;
}
 

In following example pseudo classes CSS will remove underline text and change color for visited link

 

/* visited link*/
a:visited {
    color: green;
    text-decoration: none;
}   

Set height and width of an image with CSS and element properties

The CSS height and width properties are used to set the height and width of an html element.

Following are some height and width properties values:

  • Percentage (%) :  Percent of width height of parent container or containing block  i.e. 50%
  • Length(px, cm) : height in pixel or centimeter i.e. 150px, 5cm etc
  • Initial : Sets the height/width to its default value
  • Inherit  : The height/width will be inherited from its parent value
  • Auto: Default browser value

Code example

Width and height with image tag properties

<img src="hero_image.jpg" alt=""
           width="450px" height="450px">

Image width and height with CSS

img{
    width:450px;
    height:450px;
}
 
.hero-image{
    width:45%;
    height:45%;