What is CSS Margin

-

What Is CSS Margin? Syntax, Properties, and Examplesweb designing theory

This Blog You Will Learn

ஃ What is Margin in CSS
ஃ Why Margin use
ஃ Syntax 
ஃ CSS Margin Explained
ஃ Advantage of CSS Margin
ஃ CSS Margin  Properties
ஃ Explain Program
ஃ Output

What is Margin in CSS

CSS Margin is the space outside an HTML element border.
Margin creates distance between one element and other surrounding elements.
Margin controls outer spacing

Why Margin use

  1.  Improves readability
  2. prevents elements from touching each  other
  3. Helps create clean  layouts

Syntax 

selector
{
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

}

CSS Margin Explained

1) one Value

margin: 20px;

  • All Sides =20px

2) Two Values

margin:20px 30px;

  • Top And Bottom =20px
  • Left And Right =  30px

3) Three Values 

margin: 20px 30px 40px;

  • Top  =10px
  • Left& Right =20px
  • Bottom =30px
4) Four Values

margin: 10px 20px 30px 40px;

  • top→Right→Bottom→Left

Advantage of CSS Margin

✅Creates Space Between  Elements

✅ Improves page Readability

✅ Helps in Layout Design

✅ Easy Element Positioning

✅ Supports Responsive Design

✅ Allow Individial Side Control

✅ Centers Elements Easily

✅ Cleaner and Professional UI

CSS Margin  Properties


margin-top: 50px; /* space*/
  margin-bottom: 100px; /* controls space below element */
  margin-right: 80px; /* right side space */
  margin-left: 90px; /* space left side */

What Is CSS Margin? Syntax, Properties
Examples

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid blue;
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 80px;
  margin-left: 90px;
  background-color: lightgrey;
  color:brown;
}
</style>
</head>
<body>

<h2> CSS Margin Properties </h2>

<div>The margin property controls the outer spacing around HTML elements.
<br>CSS margin is all about space on the outside of an element. Think of
it as the breathing room between one element and the others aroundit.</div>

</body>
</html>


What is CSS Margin? Syntax, Properties
Explain Program

Step  1] 

<!DOCTYPE html>

  • This declare the document type.
  • browser that the document is written in html

Step 2 ]

<html>.... . </html>

  • html is the root element of the html page.
  •  Every thing inside it is part of the webpage.

Step 3]

<head>....</head>

  • Contains internal CSS and page- related settings.
  • <head> shown directly on webpage.
  • Control CSS Styles & page settings

Step 4]

CSS Styling

<style>
div {
  border: 2px solid blue;
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 390px;
  margin-left: 80px;
  background-color: lightgrey;
  color:brown;
}
</style>

  • <div> Elements in the document.
  • Create 2px blue border.
  • Add 50px space above the div.
  • Adds 100px  space below the div.
  • Add 390px space on the right reducing available width.
  • Add 80px space on the left.
  •  Applies a light grey background to the div content area.
  • Sets text color inside div to brown.

Step 5]

<body> Section

<body>

<h2> CSS Margin Properties </h2>

<div>The margin property controls the outer spacing around HTML elements.
<br>CSS margin is all about space on the outside of an element.
Think of it as the breathing room between one element and the others
around it.</div>

</body>
</html>

  • Contains the visible content of the webpage.
  • Display text inside a styled div
  • <br> line break
  • <div> tag CSS styles defined 
Step 6]

   Closing tag

</body>
</html>

Whavt is CSS Margin? Syntax, Properties
Output

What Is CSS Margin Syntax


Related Post :-

What is linear Gradient in CSS
What is CSS Gradient
CSS Attribute Selector Explained

Comments

Post a Comment

Popular posts from this blog

css id selector

-
Image
        CSS ID Selector 1] css id selector  attribute  is the unique identifier in an html document. 2] id selector use # character. 3] css id selector is used to apply style specific HTML element. Syntax :- #id  { // css property } CSS id selector  Example:- <! DOCTYPE html > < html > < head >     < title > css id selector </ title >     < style >         #web         {             text-align : center ;             color : brown ;         }     </ style > </ head > < body >     < h2 id = "web" >         hello https://webdesigningtheory.blogspot.com/ </ h2 >         < h3 > This is program of Css ID Selector </ h3 >     </ h2 >     </ body ...
Read more

HTML pre tag

-
Image
                                    HTML pre Tag Information   1. The <pre> tag defines preformatted text.  2. Text in a <pre> element is displayed in a fixed-width font. 3.  text preserves both spaces and line breaks.  4. syntax with :- <pre>.......</pre> tag 5. displayed in a fixed-width font. 6 .The text will be displayed exactly as written in the HTML source code. Program     HTML <pre> tag <html> <head> <title>html pre tag </title> </head> <body> <pre> My name is ram my college name is satara   I like Apple My favourity color is skyblue </pre> </body> </html> OUTPUT          Related Post :-   html aside tag inline css in html html login in form
Read more

Inline css in html

-
Image
                       Inline CSS   Information: 1]    Inline CSS is used to apply a  unique style to a single HTML element . 2]   In inline CSS uses the    Style attribute of an HTML element. 3]   Css Apply in a Single element by inline css Technique.  4]  Inline css also use method to insert style sheets in HTML document Inline Css        Program <html> <head> <title>inline property</title> </head> <body> <h1 style="color:red; background-color:pink;">html</h1> <p style="color:purple;">hyper text markup language</p> <h3>Information</h3>s <dl>INLINE CSS APPLY</dl> <dd>inline csss use</dd> <P>Css Apply in a Single element by inline css Technique.<br>  inline css also use method to insert style sheets in HTML document.  </P> ...
Read more

how to add background image in html.

-
Image
how to insert background image in html Program    Background Image  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < style >     p { background-image : url ( 'https://cdn.wallpapersafari.com/27/83/hGWHei .jpg' ); <!-- image path --> height : 600px ; <!--height of image-->         width : 50% ;     }     p {         color : red ;         text-align : center ;     } </ style > < body >     < h1 > Background Image </ h1 >     < BR<BR >< BR > < p > < BR<BR >< BR >< BR >< BR > how to insert background image ...
Read more

CSS text-emphasis-color Property

-
Image
 Learn CSS text-emphasis-color Property  Learn CSS text-emphasis-color Property The text-emphasis-color property in Cascading Style Sheets (CSS) is used to set the color of emphasis marks applied to text. Syntax: selector  {   text-emphasis-color : color ;  }   Learn CSS text-emphasis-color Property Example <! DOCTYPE html > < html > < head > < style > h1 {     text-emphasis-style : circle ;   text-emphasis-color : blue ; } p {   text-emphasis-style : triangle ;   text-emphasis-color : red ; } h2 {   text-emphasis-style : double-circle ;   text-emphasis-color : orange ; } h3 {     text-emphasis-style : sesame ;   text-emphasis-color : red ; } </ style > </ head > < body > < h1 > CSS text-emphasis-color Property </ h1 > < p > https://webdesigningtheory.blogspot.com/ </ p > < h2 > Web Designing Theory </ h2 > < h3 > ...
Read more