This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Why does styling the background of the body element affect the entire screen?
(7 answers)
Closed 4 years ago.
Hi I'm newbie in HTML and CSS, sorry if my question sounds too basic:
I set background color to be green for element as the picture below shows:
You can see that the content of is currently 366*18, and according to W3C:
The background of an element is the total size of the element, including padding and border (but not the margin).
so green color should only apply on the content of whose size is 366*18, since the height is 18px, so the green color should only apply with a height of 18px, but why green color applies all the way down to the end of the page?
You want to target just the 'p' tag here.
Inline:
<p style="background-color: green"></p>
or CSS:
p { background-color: green; }
Related
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
For background-size, we can use percentage, setting the width and height of the background image in percent of the parent element. Now if the html goes like this:
<section>
<p>Background-size by percentage.</p>
</section>
and I set up background image for <p>. Now which one is the parent element of the background image, <p> or <section>? Thanks.
Parent element means the background image's parent. It's <p>.
Try to set different width on <p> and <section>, like width: 500px and width: 1000px
You will get it.
This question already has answers here:
width and height for a span does not show up unless a text is entered
(6 answers)
How to set height property for SPAN
(9 answers)
Closed 4 years ago.
In the following code, why doesn't span adhere to the height rule:
<div style="border:1px black solid">
inside div
<span style="height:300px">inside span</span>
</div>
http://scratchpad.io/hilarious-shirt-8130
You gotta put the next style to your span tag
display:inline-block;
If you wanna see the change put a background to your span
background-color: #f00;
Span is an inline element, which has neither a width nor height of its own. You would need <span style="height:300px; display:inline-block"> to get a styled height working.
See display:inline resets height and width
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 years ago.
I don't know why Bootstrap is doing this. I want the whole background of the website to be black and for that I'm doing this inside HTML file
<body>
<div id="fullWrapper">
<section id="welcomeSection">
<div class="container">
<p style="margin-top:30px;">Welcome to the website. This website was made to test the light and dark modes with bootstrap</p>
</div>
</section>
</div>
</body>
and inside css file.
#fullWrapper {
background: rgb(0, 0, 0);
height: 1000px;
}
but the output is leaving a white space of 30px from the top. See this output
That space is from the paragraph margin-top: 30px; which is caused from margin collapsing. If there is no border, padding, etc. on the parent element to separate margin-top on the first child block, then those margins collapse.
Here is further explanation about margin collapsing on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
There are multiple ways to get rid of that white space. Remove the margin from the paragraph and replace it with padding-top: 30px; or add at least padding-top: 1px; to either the .container or #welcomeSection divs.
This question already has answers here:
Inline elements and line-height
(2 answers)
Closed 5 years ago.
CSS:
span{line-height:25px;}
HTML:
<div><span>16<br>Fri.</span></div>
However, the height of div is 49.6px and line-height is 24.8px.
Only one computer has this situation.
Other height is 50px.
How to fix?
You fix it by using display: inline-block.
Inlined elements can't be sized. Consider it as simple text you can only color.
span{
line-height: 25px;
}
<div><span>16<br>Fri.</span></div>
This question already has answers here:
Shrink-to-fit div and paragraph, based on image?
(6 answers)
Closed 8 years ago.
I have a div with an img and a p tag. I want the div to "shrink-wrap" the image and let the text organically wrap. However, I'm trying to do this with absolutely no javascript or constraints (ie width=300px / 50% etc) as my frame needs to be fluid.
Here's an example of something similar to what I have now: How can I make the outer dive match the size of the "Google" image without using fixed sizes or javascript?
http://jsfiddle.net/pVF74/
div {
border:1px solid black;
display:table;
width:1%;
}
http://jsfiddle.net/pVF74/2/
Add display: inline-block; to your div's class.
Example here http://jsfiddle.net/r9rLr/