Background color not touching two lines of text
I'm just trying to get the backgrounds by touching their long edge; as in this code, but with two blues touching.
code i:
.header h1{ background:#0060D3; padding:10px; text-align:center}
.header h3{ background:#00CBFF; padding:10px; text-align:center}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
source to share
You have to normalize the css (overwrite the default states of properties padding
and margin
).
* {
margin: 0;
padding: 0;
}
.header h1 {
background: #0060D3;
padding: 10px;
text-align: center
}
.header h3 {
background: #00CBFF;
padding: 10px;
text-align: center
}
<div class="header">
<h1>Page Name!</h1>
<h3>Subheading!</h3>
</div>
source to share
While the "Kind user" answer solves your problem perfectly, you will still have to ask for help again the next time a similar problem occurs. So instead of trying to answer your question directly, I will explain how to figure it out for myself.
Your browser will have an inspector (usually right click and select "Inspect" from the context menu). I often use Firebug, which is an advanced inspector that you can install as a plugin, but this is not essential for this task, and one built into your browser is enough.
Click on the button at the top left of the inspector that looks like a cursor over the field, then click on any item on the screen to select it.
In "rules" you will see all the CSS rules that currently affect this element. Selecting the box model tab will allow you to see the size of the element itself, as well as padding, borders and margins on each side. Hovering over an element will also highlight each part of the window model separately, so you can easily tell that the white space you saw was part of the box.
To test this theory, you can go back to the rules tab and create a new rule with an indication margin:0px;
and you will immediately see the effects. This is an effective method of checking what CSS changes will appear before adjusting the actual file.
Side note. Just for clarification, although I wish it were obvious, I never make such assumptions. Any changes made in the inspector are completely volatile as they will not be saved to your file. If you refresh the page, it will reload from the file and any changes made in the inspector are gone.
source to share