Skip to main content

Learn CSS for beginner : Margins and Padding

Change the CSS code for h2 to the following:
h2 {
    font-size: 1.5em;
    background-color: #ccc;
    margin: 20px;
    padding: 40px;
}
This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left,padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:
Margin box
Border box
Padding box
Element box
You don’t have to use all of these, but it can be helpful to remember that the box model can be applied to every element on the page, and that’s a powerful thing!
Labels:

Popular posts from this blog

Free tips to save yourself from phishing

Free tips to save yourself from phishing Phishing is a type of social building method utilized by programmers to assemble delicate data, for example, usernames, passwords and Visa points of interest by acting like a trustworty individual/association. Since most online clients are ignorant of the methods utilized as a part of completing a phishing assault, they regularly fall exploited people
Read more

html intermediate tutorial Text: Addresses, Definitions, Bi-directional, and Editorial

Addresses address  should be used specifically for the contact details  relating either to the entire web page (and so only used once) or to an  article element . It’s isn’t, as it might at first appear, for marking up any old address willy-nilly. < h3 > Author contact details </ h3 > < address > < ul > < li > 0123-456-7890 </ li > < li > author_dude@noplaceinteresting.com </ li > < li > http://www.noplaceinteresting.com/contactme/ </ li > </ ul > </ address > Definition terms dfn  is a  definition  term and is used to highlight the first use of a term. Like  abbr , the  title attribute can be used to describe the term. < p > Bob's < dfn title = "Dog" > canine </ dfn > mother and < dfn title = "Horse" > equine </ dfn > father sat him down and carefully explained that he was an < dfn title = "A mutation that comb...
Read more