Is it possible in CSS to outline/color an element with `display:block` children?

Question

I have the following DOM layout:

<div style="background-color:rgba(0, 0, 255, 0.2);outline:1px solid red;display:inline">
  This should be marked
  <div>i want this too</div>
  and this too
</div>

I want to style the outer div that is outlines or colors the background of its whole area, the inner div included, like in the Chrome devtools if you select a part of the DOM:

My restriction is that I cannot change the styles inside the span, it has always different children (I can write any CSS to the outer span though, that doesn't change the position/dimensions). Basically I want to replicate the Chrome devtools DOM highlighter.

How to do this?

your html is invalid - you can't put a div inside a span, but you should be able to achieve what you want making the span inline-block — Pete, Jun 22 '23 at 14:39
@AniketPandey — No, you can't. The HTML specification is quite clear. [Only *phrasing content* is permitted inside a span](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element). — Quentin, Jun 22 '23 at 14:42
@Pete sorry, I forgot to mention I cannot have there stuff that changes the dimensions of the `span`. I'm basically trying to replicate the Chrome devtools selector -- something that highlights the dimensions of a component without changing its or its childrens position/dimensions — sydd, Jun 22 '23 at 14:47
well the only way to highlight full width would be to make the span display block but if you can't do that then you really can't do what you are wanting — Pete, Jun 22 '23 at 14:49
ill also edit my code to be a valid HTML to not sidetrack the convo — sydd, Jun 22 '23 at 14:50
@sydd The reason for the seen styling is answered in that question [display:block inside display:inline](https://stackoverflow.com/questions/1371307) by this [answer](https://stackoverflow.com/a/1415625/1960455) `When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.` So the inner `div` will never get the styling of the "surrounding" `inline` element. — t.niese, Jun 22 '23 at 19:33

Vad Sim · Answer 1 · 2023-06-22T15:01:11.657

Why it is happening

The <span> tag has display: inline property enabled by default. It says the browser to embed text content and child tags with display: inline to text. For example:

.styled {
  border: 5px dashed deeppink;
  background: #00cccc;
}

<p>Lorem <span class="styled">ips<b>um</b></span> dolor sit amet...</p>
<!-- <b> has display: inline by default -->
<p>Lorem <span class="styled">ips<div style="font-weight: bold; ">um</div></span> dolor sit amet...</p>
<!-- <div> has display: block by default, so it has not been styled -->

Solution

You can replace this tag by <div> or set display: block; property to it, so your code will look like:

<span style="background-color: rgba(0, 0, 255, 0.2);
             outline: 1px solid red;
             display: block;">
  works1
  <div style="display: block;">I want this too</div>
  works2
</span>

Solution 2

As said in comments to a question, it's unwelcome to put <div> into a <span>, so you can try this:

<div style="background-color: rgba(0, 0, 255, 0.2);
             outline: 1px solid red;">
  works1
  <div>I want this too</div>
  works2
</div>

And remember that have display: block; enabled by default, so you do not need to enable it (fixed in solution 2)

score 1 · Answer 2 · answered Jun 22 '23 at 14:51

It works exactly the way you want:

<span style="background-color:rgba(0, 0, 255, 0.2);outline:1px solid red; display: block;">
  works1
  <div style="display:block">I want this too</div>
  works2
</span>

Although simply changing the display property of your span will do the trick but I think it is something that you should not do. span can be inside of a div but a div should not be inside of a span.

Is it possible in CSS to outline/color an element with `display:block` children?

2 Answers2

Why it is happening

Solution

Solution 2