I want to remove the extra space between these two elements. I tried but couldn't do it.
Is this a problem of margin collapsing?
How can this be solved? How can I remove that extra space?
Here is my HTML and CSS:
body {
width: 250px;
height: 100px;
background: #F2F2F2;
}
#output {
font-family: roboto light;
color: #A4C639;
font-size: 30px;
}
#grade {
font-size: 25px;
color: black;
}
#max {
color: black;
}
#percentage {
background: #A4C639;
color: #FFFFFF;
padding: 15px;
border-radius: 15px;
}
<div id="output">
<i>
<span id="grade">Your grade :</span>
<span id="total">524</span>
<span id="max">/725</span>
<center><h1><span id="percentage">72.28%</span></h1></center>
</i>
</div>
Whitespace characters between HTML elements create a new text block, which is displayed as a space between the elements.
Remove all the whitespacing between the elements to get rid of it:
<span id="total"></span><span id="max"></span>
Alternatively, you can fill the whitespaces with a comment block:
<span id="total"></span><!--
--><span id="max"></span>
Put the <span> tags on the same line without any space between them.
It looks as if you have the wrong title - your h1 is what is causing the space between the text and the percentage box. To remove try this:
#output h1 {margin-top:0; padding-top:0;}
If it actually the spans you are talking about then you need to remove any white space that is between them - See the other answers for this
I know this has been answered, but I would have done this differently - the original HTML is combining display and semantic elements together ( with the italic, H1 and center tags).
I would do the HTML like this:
<div id="output">
<span class="grade">
Your grade :
<span class="total">123</span>/<span class="max">777</span>
<div class="percentage">23.45%</div>
</span>
</div>
And the CSS like so:
#output {
font-style:italic;
text-align: center;
font-family : roboto light;
color : #A4C639;
font-size : 30px;
width: 250px;
}
.grade {
font-size : 25px;
color: black;
}
.total {
color : #A4C639;
}
.max {
margin-left:0;
}
.percentage {
text-align: center;
font-size: 200%;
background : #A4C639;
color : #FFFFFF;
padding : 15px;
border-radius : 15px;
}
This gives you what you were after but the style and layout was done totally in the CSS markup.
If you want to see it in action try this jsfiddle: http://jsfiddle.net/justin_thomas/P6wmJ/19/
It is usually much better to separate your style from your content and semantics. It will make things easier if you ever need to change the layout and so on.
That's some weird behavior of span elements in HTML.
If the first span has style text-decoration: underline; then one extra space will be underlined also.
I solved it by changing span to div and applying display: inline-block to divs.
try i{font-size:0}#output span{font-size:30px;} in your css
Related
Right now my header contains two p-tags with different styles:
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
Is it possible to convert this into one h1-tag? Or can I have two h1 after each other? The main purpose is that it should work well with seo.
SEO-wise - each web page should contain one H1 tag.
A possible solution for what I believe you're trying to achieve is adding span tags in your H1 enabling you to style each part of your H1 differently:
HTML:
<h1>
<span class="smallerFont">First half</span>
<span class="bigFont">Second half</span>
</h1>
CSS:
h1 {
color: #fff;
}
.smallerFont {
font-size: 34px;
margin-bottom: 10px;
}
.bigFont {
font-size: 88px;
}
1) You should move your styling to a stylesheet.
2) You can easily have several styles in a single h1 ... like this:
HTML:
<h1>First <span class='A'>Second</span></h1>
CSS:
h1 { color:#F00; }
.A { color:#0F0; }
you can use
<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>
Css style:
h1{
color :red;
}
h1> span{ //all the span elements within h1 is applied this style
color : blue;
font-size:34px;
margin-bottom:10px;
}
.otherStyle{
color:yellow;
font-size:88px;
}
Kinda a non-typical way to do this would be to use a combination of ::first-line and white-space: pre-line. This combo works pretty well since white=space: pre-line allows you to determine exactly where the first line ends. Of course, like the other answers, this method keeps you at just one h1 tag—ideal for SEO purposes.
A quick example on how this works:
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
}
h1::first-line {
font-size: 34px;
}
body {
background: black;
}
<h1>First half
Second half
</h1>
That HTML looks a little weird. That's because we're forcing a newline with white-space: pre-line. It preserves any line breaks in the code (except, apparently, the last one). This makes new lines important, as demonstrated below.
h1 {
white-space: pre-line;
border: 1px black solid;
}
<h1>First half
Second half</h1>
<h1>
First half
Second half
</h1>
Still, it makes our first line end wherever we want it to, allowing us to target it with the ::first-line pseudo-element. Unfortunately, the styles supported by the ::first-line pseudo-element are fairly limited, but you can still do quite a bit. Sadly, this makes your margin-bottom hard to replicate. My closest attempt came from using line-height, which worked, but left a larger gap between the h1 and the next element. Still, it could be fixed with a little bit of negative margins, but then you could potentially run into other issues.
Though it's probably not the best way to go about doing this, it is a fun and interesting approach to solving the problem.
h1 {
white-space: pre-line;
color: #fff;
font-size: 88px;
line-height: 120px;
}
h1::first-line {
font-size: 34px;
line-height: normal;
}
/* Formatting styles */
* {
margin: 0;
padding: 0;
}
body {
background: black;
padding-top: 10%;
display: flex;
justify-content: center;
align-items: flex-start;
}
h1,
div {
max-width: 475px;
border: 1px white solid;
flex: 1;
/* Makes h1 the same font-weight
of p for better comparison */
font-weight: normal;
}
<h1>First half
Second half
</h1>
<div>
<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>
</div>
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
I am trying to create a pure CSS hover effect on a block of text. This is the html..
<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>
and the CSS..
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.background-switch:hover {
background-color: lightblue;
color: white ;
}
It works fine without the <span> in the <p> tag..but the thing is I need the color of the "now that" to be red before hovering, and white when hovering. This is not the case as the red refuses to turn white when hovering. Is there a way to make the class property applicable to the <span> too?
Because you have:
<span style="color:red;">
Which is an inline style, it's not getting over-ridden.
The best way to fix this is to move that inline style to the CSS
.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}
Or if you want to keep the inline style, then add !important in your CSS, so that the rule overrides the inline rule.
JSFiddle Demo
Add a class to your span
<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>
Then in your css :
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.random-class {
color:red;
}
.background-switch:hover,
.background-switch:hover .random-class {
background-color: lightblue;
color: white ;
}
Try
.background-switch:hover span {
color: inherit !important;
}
You need !important to overwrite the inline styling on the span tag. Best would be if you replaced the inline styling with a class instead, this would remove the need for !important.
Your code does not work because of the selector precedence in CSS. Inline styles trump everything else. So:
<span style="color: red;"> ignores other styles.
Adding a class to your span will fix this:
<span class="something">
Remove the style="color:red;" from your span, and then add the following to your CSS:
.background-switch span {
color:red;
}
.background-switch:hover span {
color:white;
}
.background-switch span {color: red;}
.background-switch:hover span {color: #fff;}
Remove inline style from span
Adding something like this could help
.background-switch > span { color:red; }
.background-switch:hover > span { color:white; }
and remove the style inline style="color:red;
I have the following (excerpted) html:
<span id="version">Version 1 <small>Last modified 04/August/2012</small><br>unfinished</span>
and the following (excerpted) css:
#version {
font-size: xx-large;
color: Black;
text-align: left;
margin-left: 35px;
}
#version small {
font-size: 50%;
}
Everything displays correctly until after the <br>, where the text isn't adjusted for the margin. Why isn't it adjusted after the <br>?
Because the span is an inline element. Do accomplish what you want, either set the display property on the span to block or inline-block, or change the span to a div.
jsFiddle example
I am creating a webpage (first time) and i'm following as much of the CSS rules and tags as I can. However, I ran into a problem with white space. I've underlined the first line of text but now the second line seems to have drifted below. Is there a way to make it a bit more snug, i'd like the second line of text to be just below the above line.
body,td,th {
color: #000000;
}
body {
margin: 0;
padding: 0;
padding-top: 6px;
text-align: center;
background-color: #FFFFFF;
}
#centered
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
}
.style3 {
font-size: 32pt;
color: #666666;
margin-left: 0px;
border-bottom: 3px double;
}
.style5 {
margin-left: 390px;
font-size: 32pt;
color: #CCCCCC;
}
-->
</style></head>
<div id="centered">
<body>
<p class="style3"> FIRST LINE OF TEXT</p>
<p class="style5">INDENTED SECOND LINE</p>
</body>
</div>
</body>
</html>
You need to adjust the line-height. More specifically, add the following declaration:
.style5 {
line-height: 0.72em;
}
If you only want the first line of .style5 to be snug, you need to adjust the top margin. Use this declaration instead:
.style5 {
margin-top: -10px;
}
See fiddle.
Note: You should always validate your markup using the W3C Markup Validation Service and your css using the W3C CSS Validation Service. It will help you a lot when you're starting out.
p.style3, p.style5 {
margin-top: 2px;
margin-bottom: 2px;
}
Play with those two values until you are happy with the result :)
Have you tried the CSS line-height rule?
http://www.w3schools.com/css/pr_dim_line-height.asp
hmm. your code little buggy. first i see that you have div OUTSIDE of body tag.
try to validate your code.
anyway you can change the space weebven lines in the same paragraph with : p {line-height:0.7em} this creates a 7/10 line height of the font size.
if you want to decrease space between paragrapsh you shold change the margin|padding of the paragraphs. p{margin:0 91px 0 37px;padding:0 43px 0 19px}