How to Adjust the CSS Margin for Only Webkit
Webkit may sound like an Internet repair package, but it's actually the name of the rendering engine that powers the Google Chrome and Safari browsers. These browsers take advantage of enhanced features included in CSS3. Developers who use Cascading Style Sheets can target several browser attributes that apply only to browsers that use Webkit. If your Web application needs to adjust margin values in Webkit browsers, add a -webkit-margin-start attribute to your CSS code.
Other People Are Reading
Instructions
-
-
1
Open your HTML editor or Notepad;
-
2
Paste the following statement in the document's body section:
<h1 class="webkitTest">This is a heading </h1>
This creates a heading that references a CSS class named "webkitTest."
-
-
3
Copy the following text, and paste it into the document's head section:
<style>
.webkitTest {
: "-webkit-margin-start: 60px;
}
</style>
This creates the "webkitTest" class. Note the attribute named "-webkit-margin-start." This attribute sets the starting margin for browsers that use Webkit. The attribute's value, "60px," tells the browser to place any element that references the class 60 pixels from the left edge of parent container. In this example, the parent container is the document's body element.
-
4
Save the document, and open it in Safari or Google Chrome to view the Web page. The heading will appear 60 pixels from page's left edge.
-
1
Tips & Warnings
This example uses an exaggerated margin size of 60 pixels to show how the -webkit-margin-start affects an element's position on a Web page. In practice, you will probably use smaller pixel values in your CSS definition. Continue to use the standard "margin-left" CSS property when you need to set the left margin for elements in browsers that do not use Webkit.
