Margins in CSS

Ad Code

Margins in CSS

RK Tutorials September 13, 2023


 Margin Property

It allows us to define the space around element of HTML document. We use following properties to set margin of element.

  • margin
  • margin-bottom
  • margin-top
  • margin-left
  • margin-right
Example



<html>
<head>
<style>
h1 {
        margin-top: 50px;
        margin-bottom: 100px;
}
 p {
        margin-left: 75px;
        margin-right: 75px;
}
</style>
</head>
<body>

<h1>Margin example</h1>
<p>This is a normal paragraph of text.</p>
</body>
</html>
Output of above code


Following shorthand notation can take one, two, three, or four whitespace separated values.
  • If one value is specified, applied to all four sides.
  • If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element's box.
  • If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
  • If four values are specified, they are applied to the top, right, bottom and the left side of the element's box respectively in the specified order.
Example h1 { margin: 30px; /* apply to all four sides */ } p { margin: 20px 70px; /* vertical | horizontal */ } div { margin: 20px 50px 70px; /* top | horizontal | bottom */ } hr { margin: 20px 50px 70px 90px; /* top | right | bottom | left */ }

Example for mouseover with span

<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Mouse over the words to change the cursor. Place the mouse pointer on following word for effect.

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

Pseudo-elements
A pseudo-class is used to define a special state of an element.
Features
●  Special-case selectors
●  Anchors: Style an element when a user mouses over it, Style visited and unvisited links differently, Style an element when it gets focus.
      a:hover
      a:visited
      a:active
      a:link

Example for above pseudo-elements

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Output
This is a link
When you will place mouse pointer on link then it will show effect.
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
Classes:
If need to use different styles in one webpage, use classes. Define below code in style tag.




Call above class in HTML using following code.



<p class=“black”>This sentence is in black</p>
<p class=“blue”>This sentence is in blue</p>

RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code