In the html I have below code. Text without the span element is getting space around it. But Text with the span element is not getting the space aournd it. Why there is space around the text, but not with span. This might be some behavior, I am new to this one. I searched in google but didn't get articles related to this behavior
Sample Text
<span>Sample Text</span>
Text without span element is getting space because of the body.
span is an inline tag it takes space as much as required and leaves space for other element.
below example all four-span element will display in the same line because each tag takes only necessary space and rest of space free for other elements.
<!DOCTYPE html>
<html>
<head>
<title>Test span tag</title>
</head>
<body>
<h2>Welcome To stackoverflow</h2>
<!-- span tags with inline style/css -->
<span style="background-color:powderblue;">
Stack</span>
<span style="background-color: lightgray;">
-Contribute-</span>
<span style="background-color: yellow;">
Article</span>
<span style="background-color: lightgreen;">
STCK</span>
</body>
</html>
Related
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
I'm trying to reduce the vertical space between two sections, however, being a knob at CSS doesn't help. Using tables (heh) the spacing she is gone, but with CSS I'm pulling my hair out.
If you copy/paste the code below you'll notice the vertical spacing between "Link Heading" and "www.123.com" is different than that between "www.123.com" and "Some more text":
Link Heading...
www.123.com
Some more text...
Here's the skinny
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.link{color:#0000cc}
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal}
.result{font-size:0.850em;line-height:1em;margin-bottom:20px}
.site,.info{float:left;font-size:1em}
.info{color:#222234}
</style>
</head>
<body>
<a class=link href='http://www.123.com/'>
<span class=heading>Link Heading...</span>
</a>
<br>
<div class=result>
<span class=site>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
<br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
Now I know the answer is going to be something obvious, but I can't see the forest for the friggin css trees anymore.
I'd appreciate any pointers.
Thanks
use CSS line-height: or negativ margin: to change that vertical space
also be sure if you are using breaks <br> that their height: also changes the vertical space
It is because the table rows () has a height of 27 pixels.
If you set class to info in both and style .info {height: 27px; color:#222234}, they will be the same height as in the table.
<div class=result>
<span class=info>www.123.com</span>
<br>
<span class=info>Some more text...</span>
</div>
I would suggest getting rid of your <br> tags, and using a Block Element.
From the related Block formatting contexts:
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
This means that block elements, such as <div> and <p> (among others) will automatically include a line break after them, and the space between them can be controlled with margin. As such, I'd change your code to look more like the following:
<body>
<div class="heading">
<a class=link href='http://www.123.com/'>Link Heading...</a>
</div>
<div class=result>
<p class=site>www.123.com</p>
<p class=info>Some more text...</p>
</div>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr>
<tr><td>www.123.com</td></tr>
<tr><td>Some more text...</td></tr>
</table>
</body>
A couple other nitpicks:
Use quotes around your attribute values (<p class="site">...</p>)
Don't use tables for layout (using tables for tabular data is okay)
Proper indentation makes your code more readable
Hi here is a simple solution by putting everything and the same div and only applying a style the the link by using the "a".
<head>
<style>
body{font:13px/27px Arial,sans-serif}
.result{
font-size:0.850em;
line-height:1.2em;
margin-bottom:20px
}
.result a
{
float:left;
font-size:1.2em;
margin:0;
font-weight:normal
}
.result a:link
{
color:#0000cc;
text-decoration: underline;
}
.result a:hover
{
color: #1a0186;
text-decoration: none;
}
</style>
</head>
<body>
<div class=result>
<a href='http://www.123.com/'>Link Heading...</a><br>
www.123.com <br>
Some more text...
</div>
</body>
I really need help :)
I have to put multiple words in a line, each with a different color, I tried wrapping each word in a <div> </div> and styling, but it seems it makes a new line between words.
Try using <span>.
<div>s are used for block-level elements. <span> is used for inline elements, such as text enclosed in a <p> element.
Further reading: Span and div
That's because <div> is a block element. Try <span> (an inline element) instead.
Use a Span tag instead, like
This <span style="color:red;">text</span> is red, but <span style="color:blue;">THIS</span> text is blue!
<div> is a block-level element. This means you either need to apply a display: inline style to it or better yet, use an inline tag such as <span>
use
<span>Text Here</span>
And style it in your css.
Use <span> </span> It is what it is mean to.
Then you can set css classes.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My web</title>
<style type="text/css">
yellow {
color: yellow;
}
</style>
</head>
<body>
Span is not at the <span class="yellow">yellow level</span>.
</body>
</html>