This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 2 years ago.
What is the basic difference between the following CSS:
display:inline
and this:
display:block
Using these separately on an element, I get the same result.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
display: block - a line break before and after the element
display: inline - no line break before or after the element
Here is a comparison table:
You can view examples here.
display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.
Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
Display : block will take the whole line i.e without line break
Display :inline will take only exact space that it requires.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.
block elements expand to fill their parent.
inline elements contract to be just big enough to hold their children.
display:block
takes the entire row(100%)of the screen ,it is always 100%of the screen size
display block example
display:inline-block takes up as much width as necessary ,it can be 1%-to 100% of the screen size
display inline-block example
that's why we have div and span
Div default styling is display block :it takes the entire width of the screen
span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
Display:block
It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated.
Display:inline
It's just uses as much space as required and allows other elements to be aligned alongside itself.
Use these properties in case of forms and you will get a better understanding.
a block or inline-block can have a width (e.g. width: 400px) while inline element is not affected by width. inline element can span to the next line of text (example http://codepen.io/huijing/pen/PNMxXL resize your browser window to see that) while block element can't.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
Block Elements: Elements liked div, p, headings are block level. They start from new line and occupy full width of parent element.
Inline Elements: Elements liked b, i, span, img are inline level. They never start from new line and occupy width of content.
Related
Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?
In other words, what's the difference between:
<div style="float: left; display: inline-block;">text</div>
and
<div style="float: left; display: block;">text</div>
?
An answer by #thirtydot might help you... Question's link
I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.
Yes, display: block is redundant if you've specified float: left (or right).
(What would happen if you tried to
specify display:inline and float:left?
)
display: inline will not make any difference, because setting float: left forces display: block "no matter what":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.
However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.
Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,
Some examples:
If you set position: absolute, then float: none is forced.
The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.
Is there a tool that can check for
such things?
I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.
You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.
Inline elements — don’t form boxes. They sit horizontally next to each other.
Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.
A good resource: http://learnlayout.com/inline-block.html
According to SitePoint:
If you’re new to CSS layouts, you’d be forgiven for thinking that
using CSS floats in imaginative ways is the height of skill. If you
have consumed as many CSS layout tutorials as you can find, you might
suppose that mastering floats is a rite of passage. You’ll be dazzled
by the ingenuity, astounded by the complexity, and you’ll gain a sense
of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
When you use float: left; almost any elements behave as a block element. So there is no any difference in this particular case.
I'm attempting to get a drop caps (or initial caps; whatever you may call it) effect on a heading. Here is an example of what I'm trying to accomplish.
I've found success with inline span tags that are floated, but when the heading wraps into a second line, the paragraph section breaks onto its own line. See this jsfiddle for an example and adjust the viewing window to see the effect I'm referring to. http://jsfiddle.net/fEn4U/
The structure in the first two jsfiddle examples (with the h1 and p tags) is how I would prefer to have the html. But I can settle for a span in the p tag if that's the only solution. As you can see, I'm further away from a solution with the h1, p structure than I am with the span and p tags.
Also note that the container will be a fixed width, and the content within will be dynamic, so I can't always rely on the heading breaking into two lines or staying on one.
Try to make your small text inline-block and set a maximum size.
http://jsfiddle.net/fEn4U/2/
p {
display: inline-block;
max-width:150px;
}
Is there a way to check(in CSS) if an element is breaking/new lining?
I can't know the width of the divs or the parent. I only want to know the first element after the break, so I can add special CSS to this element
Like this:
<div>
first
</div>
<div>
second
</div>
<div>
third
</div>
<div>
fourth
</div>
the css:
div {
float:left;
width:200px;
height:20px;
}
div:not(:first-child) {
padding-left:10px;
}
here i need a check if the element is on a new line so I can remove the padding :
div:first-after-break {
padding-left:0;
}
I think in this case, you could probably do this by using padding-right to separate your elements, instead of padding-left. That way, elements are not indented when they start on a new line. If padding-right causes problems at the end of the line, you could consider using the :last-child pseudo selector (more information about :last-child), and set padding-right: 0; there.
This doesn't discard the question, though. I can think of legitimate uses of the :first-after-break pseudo you describe. For example: a fully responsive layout using floating block-level elements. In such a case, one might want to know if an element is at the left of the window.
You could use the ::first-line pseudo element to get the first line of a div. If you want to apply style rules to lines that are not the first line, you could apply those styles to the whole element and then remove it from the first line. But if you want to specifically use the padding property, you could also set text-indent on the whole element (without any pseudo elements).
No, I don't think there's a way in CSS to do what you're asking.
A DIV automatically takes up the full width of it's parent unless a width is specified since it's a BLOCK level element so if no width is specified so your second DIV would be on a new line anyway.
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
If I set the img's size to 100*100, the containing div will be like 100*106.
Where does that extra '6px' come from? How does this behavior fit to the standard?
#clyde; yes this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.
you can remove it with css:
img { display:block; } or img { vertical-align:bottom; }
FOR MORE CHECK THESE
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Unwanted padding-bottom of a div
I think we need more code, especially CSS styles, but essentially the cascading part of CSS can easily flow inherited sizes downwards. If your A has a style of some extra padding or margin, then your final DIV will get it, too. And A is an inline element which often adds padding in anticipation of more content; turning A's to blocks often solves these kinds of issues, so I would try that first.