HTML
HTML5
Cascade Stylesheet (CSS)
JavaScript
JQuery
Introduction to PHP
Control Structure (Decision and Loop)
Array In PHP
end
key
String Handling in PHP
chr
md5
String Matching with Regular Expression PHP
Math Functions in PHP
Generating Graphics and Images with PHP
Form and Method in PHP
Self & Sticky Forms / Pages
PHP XML Parser
Working with file and Directories
Function/Method in PHP
Classes and Objects in PHP
Const / Define
Encapsulation
Inheritance in PHP
Magic Methods in PHP
Abstract Class in PHP
Traits in PHP
Namespaces in PHP
Introspection in PHP
Exception Handling in PHP
Include / Require
MySQL Database (PHPMyAdmin)
PHP Database Connectivity with MySQL
XML
simplexml PHP XML Parser
DOM PHP XML Parser
AJAX
AJAX with PHP
File Upload
Session and Cookies in PHP
JSON WebService with PHP
Website Designing
Google Tools
Search Engine Optimisation (SEO)
Domain and Hosting
Project in PHP
Dimensions Padding

PHP Expert

Cascade Stylesheet (CSS)

Margin

Content Author
Ashish D. Tiwari
Ashish D. Tiwari
What is margin

CSS gives a property 'margin' for giving space outside the element.


Separate margin in css
                            
                            

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

div{

background-color: lightblue;

margin-right: 100px;

margin-left: 20px;

margin-top: 20px;

margin-bottom: 150px;

}

</style>

</head>

<body>

<div>    

               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </div>

</body>

</html>

Join margin in css
                            
                            

<!DOCTYPE html>

<html>

<head>

<title></title>

<style>

div{

background-color: lightblue;

margin: 20px 20px 100px 150px;

/*margin : top right bottom left*/

}

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

</body>

</html>

Comment is Only Available for registered users! Create Account or Login Now!