Margins are an important issue to consider when designing documents. Some elements have built-in margins to separate themselves from adjoining elements. However, sometimes you will find that you need to increase (or decrease) the standard margins.
For example, when using images, you may find the margin between the image and the surrounding elements too slim. Notice that the “T” is all but touching the image. Note that the following code was used to separate the two elements:<img src=“square.png” style=“float: left;”><p>Text next to an image</p>
You can use the margin properties to adjust the space around an element. There are properties to adjust each margin individually, as well as a shortcut property to adjust all the margins with one property.
The margins on some elements are too tight, as shown by how close the text is to theimage.
The margin-top, margin-right, margin-bottom, and margin-left properties adjust the margins on individual sides of an element. The margin property can adjust one side or all sides of an element. The margin properties all have a simple format:margin-right: width;
The margin shortcut property allows you to specify one, two, three, or four widths:margin: top right bottom left;
For example, suppose you want to set the margins as follows:
You could use this code:margin: 2px 4px 10px 4px;
Tip: You don’t have to specify all four margins in the margin property if some of the margins are to be set the same. If you only specify one value, it applies to all sides. If you specify two values, the first value is used for the top and bottom, and the second value is used for the right and left sides. If three values are given, the top is set to the first, the sides to the second, and the bottom to the third.
So let’s return to the example in Figure, where the text is too close to the image. You can separate the two elements by increasing the right margin of the image, or the left margin of the text. However, you probably would not want to increase any of the other margins.
Tip: There are no real guidelines when it comes to which margins to adjust on what elements. However, it’s usually best to choose to modify the least number of margins or to be consistent with which margins you do change.
HTML Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Page Layout With Tables
Introducing Cascading Style Sheets
Creating Style Rules
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Defining Pages For Printing
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.