-1
I need to apply the CSS property background-color to the HTML element p but what’s happening is that this background-color take the whole width of a div for example if it is the parent element and not only colors the element p.
What do I have:
What I need:
7
The solution depends on the rest of your Markup, but if you have a <p/> within a <div/>, without adding more Markup you can assign the property display to your paragraph:
p{
background-color:orange;
display:inline-block; /* deixa de ser bloco e passa a bloco de linha */
}
Thus the Markup stays the same and makes use of the CSS properties to adjust the presentation of the element.
By default the element <p/> is presented as a block, which makes it occupy the entire width of the screen.
When applying the CSS property display with the value inline-block we are indicating that we intend to <p/> is presented as a block of a line whose characteristic of the block is that its width is not greater than the width of its contents unless specified.
p{
background-color:orange;
display:inline-block;
}<div>
<p>CONSULTÓRIO</p>
</div>when you say the element is block by "default", you mean "default" or that this behavior is defective?? ;)
@Andrefigueiredo In pt_EN, when we say "default" has the same meaning as "default" in English. Similarly, pt_PT "default" is different from "defective" or "defective". The word "defect" alone or in another context may already have the meaning you refer to, but in this case not because it is preceded by "by" that brings a new meaning to it. :)
Ah understood, it is that we do not know this expression in pt_BR. Thanks for the explanation. :)
5
Your CSS is working perfectly well, just missed understand how it works <p>. By default, the width of a paragraph is 100%, even if the text contained in this does not take the whole width.
To get the desired effect, just change this feature with a float:left, or even a display:inline-block. Following functional example:
.reduzido { float:left; background-color: #fc9 }
.texto { clear:both }<p class="reduzido">CONSULTÓRIO</p>
<p class="texto">Texto texto texto texto texto texto texto.</p>This way you don’t have to unstructure your original HTML to get the desired effect, and the element continues with the block features. Note that it is convenient to use clear:both or at least clear:left in the next element, to ensure that it starts at the bottom line. With space for other things after the paragraph, other elements can stay on the same line without the clear.
3
Place specific text inside the tag span and leave your CSS as follows:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p span{
background-color: blue;
}
</style>
</head>
<body>
<div><p><span>PARAGRAFO</span></p></div>
</body>
</html>
I took the test here and it worked normally.
I gave +1 because effectively this solution solves the problem but I leave the caveat that add Markup to deal with visual issues is incorrect. CSS exists for this very reason.
Browser other questions tagged html css background-color
You are not signed in. Login or sign up in order to post.
We do not know the code, but it seems to me that the most correct tag would be
<h1>,<h2>, etc., since it is a title - apparently.<p>is meant to involve paragraphs themselves.– Andre Figueiredo