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.
It is true that original height and width of the element along with padding, margin is respected and rendered without any compromise in display:block, display:inline block and display:float
But when it comes to display:inline, the element is not rendered in it's original height and width, the width and height of the content depends on the font size and content length.
(A) Talking about the padding and margin , like a normal text padding , padding and margin are allowed horizontally but not vertically. It might seem inline element's height and width increased after adding padding and margin but in real, content box size is always constant in this case with child text size. The main role of margin is to maintain space with surrounding element, since there is no space in between so, no margin is applied.
(B) And also, when you inspect the box model, padding also exist there, but the real gist of padding is to push the border away from content which also seem exist but we can't say border is pushed away, in reality border is destroyed because border is to prevent the element from intercrossing by surrounding element, so padding is not existed. You can see in horizontal padding, as it increases surrounding element are also pushed away.
I would suggest to go through this 2 code and come back again to explanation , mainly two points(A and B) ,
https://jsfiddle.net/d89Wd/
and my own version,
HTML code
<div class="inline-block">Inline-Block</div>
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="float">Float</div>
CSS code
.inline{
display:inline;
font-size: 10px;
border: 1px solid red;
}
.inline-block{
display:inline-block;
}
.block{
display:block;
}
/* .float{
float:left;
} */
div{
background-color:blue;
color:white;
height:100px;
width:200px;
padding:10px;
margin-bottom:10px;
}
I sandwiched the inline element between block and float , ..I maintained the bottom margin of all div as 10px,. I changed the font size because I told you earlier height of the inline element is rendered as height of the text font.
I will suggest to copy this code and run it into Firefox and then inspect its box model. You will see bottom margin of inline block , block and so then float exists but not of the inline element.(I will say margin padding exists physically but not into effect, or they are not creating space or pushing border)
After that you can check whether horizontal margin exists or not for inline element by adding some text
HTML code
<div class="inline-block">Inline-Block</div>
<div class="block">Block</div>
<div class="inline">Inline</div>Hey mate, how is it going?
<div class="float">Float</div>
CSS code
.inline{
display:inline;
border: 1px solid red;
margin: 0px 20px 10px 0px;
padding: 15px 90px 15px 0px;
font-size: 10px;
}
.inline-block{
display:inline-block;
}
.block{
display:block;
}
/* .float{
float:left;
} */
div{
background-color:blue;
color:white;
height:100px;
width:200px;
margin-bottom:10px;
}
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:
<div>text</div>
in stead of this:
<div>
text
</div>
*/
$.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 < maxWidth) {
return;
}
//Check how many times the container fits within the box
var times = Math.ceil(width / maxWidth);
//Function for cleaning chunks
var cleanChunk = function (chunk) {
var thisChunkLength = chunk.length - 1;
if (chunk[0] == " ") chunk = chunk.substring(1);
if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength);
return chunk;
};
//Divide the text into chunks
var text = $(this).html();
var textArr = text.split(" ");
var chunkLength = Math.ceil((textArr.length - 1) / times);
var chunks = [];
var curChunk = "";
var curChunkCount = 0;
var isParsingHtml = false;
//Loop through the text array and split it into chunks
for (var i in textArr) {
//When we are parsing HTML we don't want to count the
//spaces since the user doesn't see it.
if (isParsingHtml) {
//Check for a HTML end tag
if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) {
isParsingHtml = false;
}
} else {
//Check for a HTML begin tag
if (/<[a-zA-Z]*/.test(textArr[i])) {
isParsingHtml = true;
}
}
//Calculate chunks
if (curChunkCount == (chunkLength - 1) && !isParsingHtml) {
curChunk += textArr[i] + " ";
chunks.push(cleanChunk(curChunk));
curChunk = "";
curChunkCount = -1;
} else if ((i == (textArr.length - 1))) {
curChunk += textArr[i];
chunks.push(cleanChunk(curChunk));
break;
} else {
curChunk += textArr[i] + " ";
}
if (!isParsingHtml) {
curChunkCount++;
}
}
//Convert chunks to new elements
var el = $($(this).html("").outerHTML());
for (var x in chunks) {
var new_el = el.clone().html(chunks[x]).addClass("text-render-el");
var new_el_container = $("<div/>").addClass("text-render-container");
new_el_container.append(new_el);
$(this).before(new_el_container);
}
//Finally remove the current element
$(this).remove();
});
};
