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
Related
So in the picture you can see that the number "5384" and the number "50" dont float to the same height. I know that the paragraphs both float to the exact top of the line but how do i get them to look like they're on the same height?
I don't want to use "margin-top: some pixels" because that wouldn't scale properly would it?
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings_cents {
font-size: 1.5rem;
margin: 0 0 0 0.3rem;
display: inline;
vertical-align: top;
}
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
This can easily be achieve using sup html tag
Read more about this tag here
p{
font-weight: bold
}
p sup{
font-weight: normal
}
<p class="savings">5.384 <sup>50</sup></p>
You can easily style that using tag or classes
Just add a parent element and use display: flex. You can check both elements height is same. You can use other flex properties to change the alignment if you want.
p{margin: 0;} /*resetting p margin*/
.savings-ctnr {
display: flex;
}
.savings {
font-size: 3rem;
}
.savings_cents {
font-size: 1.5rem;
}
<div class="savings-ctnr">
<p class="savings">5.384</p>
<p class="savings_cents">50</p>
</div>
We can inspire from tag <sup>, make <span> with class savings_cents, wrap it with element with class savings and make something like this:
.up-small {
vertical-align: super; /*make element to be aligned with the superscript baseline of the parent*/
font-size: 50%; /*fits proportions*/
}
Example look into snippet
.savings {
font-size: 3rem;
margin: 0;
display: inline;
}
.savings .savings_cents {
vertical-align: super;
font-size: 50%;
}
<p class="savings">5.384<span class="savings_cents">50</span></p>
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
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
How's the standard way to mix two different text formats using CSS style sheets? I am trying the following
<span
class="cv-first">University of Illinois at Urbana-Champaign </span> <span
class="cv-first-right">Aug. 26<sup>th</sup> 2010</span>
where in the style sheet I put:
.cv-first
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
}
.cv-first-right
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
text-align:right;
font-style: italic;
}
But this doesn't work.
UPDATE
So I found that if I replace
text-align:right;
by
float: right;
I get exactly what I was looking for. So now the second part is on the right of the page.
SPAN is inline element : it is treated as part of the text aligned in block container
DIV is block element: it can be floated left or right, whereas its text contents is aligned
Inline elements have no width, therefore text-align has no sense. You may override this behavior by declaring it as block element and setting the width:
.cv-first-right {
display: block; /* necesarry for applying width */
width: 150px; /* default width is 100% */
float: right; /* move the 150px to the right side */
text-align: right; /* align text in those 150px right */
}
Try this :
.cv-first, .cv-first-right
{
font-variant:small-caps;
font-family: sans-serif;
color: #000000;
}
.cv-first-right
{
text-align:right;
font-style: italic;
}