If I set display:inline for any element then will margin, padding, width, height not affect on that element?
Is it necessary to use float:left or display:block or display:inline-block to use margin, padding, width, height on that element?
Please see "Inline formatting contexts" at the CSS spec for the full explanation.
Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected). In addition, your inline box can be broken if it contains breakable elements and reaches the margin of the containing element; in that case, at the point of break, margins and padding will not be respected as well.
Found a nice example of that with lists: http://www.maxdesign.com.au/articles/inline/
Padding will work for inline. Height and width however will not.
Edit:corrected
I know this is quite a late answer but I wrote a jQuery plugin which support padding on inline elements (with word breaking) see this JSfiddle:
Plugin Code:
$.fn.outerHTML = function () { // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning return (!this.length) ? this : (this[0].outerHTML || ( function (el) { var div = document.createElement('div'); div.appendChild(el.cloneNode(true)); var contents = div.innerHTML; div = null; return contents; })(this[0])); }; /* Requirements: 1. The container must NOT have a width! 2. The element needs to be formatted like this: text in stead of this: text */ $.fn.fixInlineText = function (opt) { return this.each(function () { //First get the container width var maxWidth = opt.width; //Then get the width of the inline element //To calculate the correct width the element needs to //be 100% visible that's why we make it absolute first. //We also do this to the container. $(this).css("position", "absolute"); $(this).parent().css("position", "absolute").css("width", "200%"); var width = $(this).width(); $(this).css("position", ""); $(this).parent().css("position", "").css("width", ""); //Don't do anything if it fits if (width /.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) { isParsingHtml = false; } } else { //Check for a HTML begin tag if (/").addClass("text-render-container"); new_el_container.append(new_el); $(this).before(new_el_container); } //Finally remove the current element $(this).remove(); }); };