This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
HTML
<span class="symbol">$</span>
<span class="value">400</span>
This displays both "$" and "400" at the same level.
The moment I add
CSS
.symbol {
font-size: 2em;
}
then, "400" is pushed down.
Question: Why is "400/.value" affected by changes to "$/.symbol" ?
Thanks.
http://codepen.io/anon/pen/emLLrm
This question realistically is about vertically aligning, and can be solved using
vertical-align:middle
or
vertical-align:top;
to override the default baseline (which by default is set to the bottom).
Demo:
.symbol {
font-size: 2em;
vertical-align:middle;
}
<span class="symbol">$</span>
<span class="value">400</span>
In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:
.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}
Related
This question already has answers here:
Margin-bottom for <a> link elements
(2 answers)
Closed 2 years ago.
.butn{
text-align:center;
margin-top: 15px;
margin-right: 5px;
color: white;
padding: 10px 15px;
background:black;
background-repeat: repeat-x;
position:relative;
}
<body>
Clear
</body>
What I am working on is href that works like a button function. However, when I try to position this so called "button" with anything margin related like margin-top and margin-right, it does not change the position of this href. So my question is how do I move the position of this (href with padding)
Put the margins in style attribute.
Clear
It seems margins of html <a></a> tag in a style like buttons doesn’t work. I faced the same problem and handled it like this.
I am not clear why this works(!?!). But I shared my experience.
Hope this helps!
This question already has answers here:
Why does margin-top work with inline-block but not with inline?
(3 answers)
Closed 3 years ago.
I have a "Read more" button on Section-e that acts weird: the margins are not responding except for left one.
GitHub Repo: https://github.com/CalogerN/Conquer
Live Preview: https://calogern.github.io/Conquer/
I tried debugging, but I found nothing.
.section-e__btn {
align-self: flex-start;
margin: 28px 0px 30px 20px;
padding: 15px 30px;
background-color: white;
font-family: "Open Sans";
}
<div class="section-e__column1">
Read more
</div>
Use display: block or display: inline-block to set margins on the <a> tag.
This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 5 years ago.
Can anyone help me to bordered cover the image?
It only follow the text.
If my text is longer, then the border is resize with the text
Here my is html code
<div id = "guitar">
<img src="christmas.jpg" alt="guitar" width="500" height="300" class="imgleft"> </img>
<h1>Guitar</h1>
Visit the three ghosts of Christmas this November as the PLAYHOUSE Whitley Bay kicks off the festive season with a fantastic Disney-esque musical production of A Christmas Carol.
</div>
Here is my css
#guitar { border : 5px solid;
padding : 10px;
margin-bottom : 2%;
}
.imgleft{float:left;}
You need to clear floated image. The simples way to do it is by applying overflow rule to container:
#guitar {
border : 5px solid;
padding : 10px;
margin-bottom : 2%;
overflow: auto; /* <--- this rule does the trick */
}
Instead of using overflow property, try clearing the float of the :after of #guitar because overflow sometimes adds excess space in your box.
#guitar:before, #guitar:after {
content: '';
display: table;
}
#guitar:after {
clear: both;
}
This question already has answers here:
Why do the :before and :after pseudo-elements require a 'content' property?
(5 answers)
Closed 7 years ago.
I have a button and on a :hover I would like an after element to show. But I can't see it. Is it possible to have an :after element on a button?
.button {
cursor: pointer;
height: 30px;
}
.button-primary {
border: none;
}
.button-primary:hover:after {
display: block;
position: relative;
top: 3px;
right: 3px;
width: 100px;
height: 5px;
}
<button class="button button-primary">My button</button>
This should now work on all up to date browsers.
To get it to work, you need to add content:""; in your after.
Yes you can use it – as long as you as don't need to support some very old browsers, e.g. MS IE 7 or lower. I don't know of any other browser that doesn't understand pseudo elements on empty HTML tags. In fact I already used it in several production sites without any problems.
This question already has answers here:
Why does this inline-block element have content that is not vertically aligned
(4 answers)
Closed 8 years ago.
Here's a fiddle that shows my code in action
The result seems crazy to me: in Chrome second button is slightly above the first.
In Firefox it is slightly below.
<div id="accounts">
<button class="account">
<h1>VISA Card</h1>
<span class="balance">-433.18</span>
</button>
<button class="account">
<h1 class="plus"><i class="icon icon-plus-sign"></i></h1>
<span class="plus-text">Add Account</span>
</button>
</div>
What is even more confusing is that padding on the h1.plus affects the position of the whole div.
What is going on here? I want two buttons to show up on the same line and simply don't undestand why they aren't. Is this a bug in the rendering engine?
UPDATE:
Narendra suggested an easy fix - float:left the buttons. I want to figure out why this misalignment happening in the first place.
You are using display:inline-block, so the buttons are aligned by their vertical-align property, which defaults to baseline.
This is a diagram from the specs which illustrates exactly that:
You can see in the first two boxes how padding and the font size of the content influence the positioning.
As a fix, use vertical-align: top or bottom, or even middle.
Edit: The image is from the table section and the situation is slighty different for inline-blocks.
Add this to your button.account: vertical-align: middle; .
And you can lose the display: inline-block; property, as it is not needed.
Check below code
button.account {
display: block;
float: left;
height: 80px;
margin: 10px 10px;
padding: 10px 5px;
width: 170px;
}
.account h1 {
font-size: 16px;
height: 16px;
margin: 0 0 5px;
padding: 4px 0 2px;
}
.account .balance {
display: block;
font-size: 24px;
}
.account h1.plus {
font-size: 24px;
padding-top: 0px;
}
Here is the fiddle http://jsfiddle.net/Gq3U8/13/
If you are using inline-block, the main concern is about the whitespace (you will see the default margin around the element). To fix this just add vertical-align:top, instead of using float:left. It will align the element to the top.
.account {
display: inline-block;
vertical-align: top; /*add this one*/
margin: 10px 10px; /*remove this one then can see whitespace*/
}