Css: Element Has 'Display: Block' and Doesn't Start a New Line

CSS: element has 'display: block' and doesn't start a new line

However, I know that when an element has a display: block property, it means that the element starts a new line.

Your information is wrong because the display property alone never tells us if we will have a new line or not.

Let's take another example without flexbox:

.box {  width:200px;  height:200px;  border:2px solid;  float:left;}

<div class="box">
</div><div class="box">
</div>

Trying To Force a New Line via CSS - Display:block Not Working

Add:

clear:both;

When using floats, "display:block" won't cause a div to be on a "new line" (display:block is the default for a div anyway). You have to use clear to tell it to start below any floats that come before it.

Breaking to a new line with inline-block?

Remove all br tags and use display: table.

.text span {
   background: rgba(165, 220, 79, 0.8);
   display: table;
   padding: 7px 10px;
   color: white;
}
.fullscreen .large { font-size: 80px }

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

Notice the <code> element doesn't flow inline with the <span> like it would normally. Check it out with the computed styles in your dev tools. You'll see pseudo margin to the right of the <span>. Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

How to make an inline element appear on new line, or block element not occupy the whole line?

You can give it a property display block; so it will behave like a div and have its own line

CSS:

.feature_desc {
   display: block;
   ....
}

Breaking to a new line with inline-block

One hacky idea is to add a new line using pseudo element and make the element inline so that the line-break will affect the inline-block elements. The drawback is that you will not be able to style an inline element like you do with an inline-block one

.ib {
  border: 1px solid #333;
  display: inline-block;
  padding: 3px;
}

.block-start {
  display: inline;
  padding: 3px;
  white-space: pre-wrap;
}
/* Create the break line */
.block-start:not(:first-child):before {
  content: "\A";
}

/* to rectify the position of the first one*/
.block-start:first-child {
  padding-left: 0;
}

<div class="container">
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
  <div class="block-start">block-start</div>
  <div class="ib">inline-block</div>
  <div class="ib">inline-block</div>
</div>

why did CSS display none(or float) cause line break

According to the W3C HTML4 specs, p elements cannot contain block level elements, not even another p.

The P element represents a paragraph. It cannot contain block-level
elements (including P itself).

This goes for any block level elements set to display as inline, or inline-block- which still remain block level elements in this context (within a p).

Theres also an interesting comment as to why this may be in the W3C HTML5 specs

The solution is to realise that a paragraph, in HTML terms, is not a
logical concept, but a structural one. In the fantastic example above*, there are actually five
paragraphs as defined by this specification: one before the list, one
for each bullet, and one after the list.

*This refers to an example of a p tag containing a ul with 5 li items

Authors wishing to conveniently style such "logical" paragraphs
consisting of multiple "structural" paragraphs can use the div element
instead of the p element.

Using display:inline-block but my DIV is still appearing on a new line

When there is a lot of text, you have to limit the width of inline-block elements by applying width settings to them which allow both elements to fit into one line, for example width: 50% and width: 45%
Otherwise they will by default expand according to the text, which will result in 100% width when there's enough text to fill a full line.

Inline-block div starts a new line

Just use table-cell instead.

Like:

.wrapper {  display:table;  }
.display_inlineblock {  display:table-cell;  }

<div class="wrapper">  <div class="display_inlineblock"><img src="image.png"></div>  <div class="display_inlineblock">Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. Hello, this is a really long sentence that causes a line break. </div></div>

How do I prevent DIV tag starting a new line?

The div tag is a block element, causing that behavior.

You should use a span element instead, which is inline.

If you really want to use div, add style="display: inline". (You can also put that in a CSS rule)

---

Related Topics