Technical Solution

How to write consistent and cross-browser compatible CSS - Ideas for Margin, Padding, Border, Height, Width

Nidhi.sen | | 1 min read

Almost all the browsers have different settings for base margins and padding. It is always important to set margin and padding for the body and html tags while styling web-pages. Otherwise it might result in some inconsistencies while displaying the pages across various browsers.

We can avoid such inconsistencies by setting margins and paddings on html and body tags to 0.

html, body {
  margin: 0px;
  padding: 0px;
}

Browsers like Internet Explorer may have transparent or invisible borders around elements. Sometimes we may need to set the border to 0 for the elements, so that the borders don't mess up page layouts in Internet Explorer.

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;	
}

Using the "auto" option for height, width will make content 'fit' into the container against all screen resolutions.

Firebug is a very powerful Firefox plugin using which we can view, select and debug the CSS applied to any particular element simply by highlighting it on screen. We can use that to debug almost all CSS issues.

Using the above mentioned rules/ideas, you should be able to bring a lot of consistency while styling webpages.

 

 

Related Topics