trying to setup amp-user-notification but the padding doesn't work. padding-right
amp-user-notification {
min-height: 30px;
font-family: 'Roboto';
font-weight: 500;
line-height: 30px;
padding: 8px;
background: #46b6ac;
}
https://github.com/ampproject/amphtml/blob/master/examples/user-notification.amp.html
padding: 8px; doenst work for rgiht side. i think cause parent amp-element is display: inline-block;
How to fix that?
Thanks!
It works just fine, it is just that the padding adds to the element's size, so the element overflows. You have to either subtract your padding from your width/height, either add box-sizing:border-box to said element.
padding in MDN
box-sizing in MDN
Related
The logo text on my site is for some reason offcentre. I can make it centred again by turning off display: inline-block. However this flattens the spacing around the text and I'm unable to get spacing back above the text (can't do vertical padding for inline elements).
How am I able to centre the text with the background colour? (trying to add text-align: center is automatically scored out in chrome dev tools for some reason?
HTML
<h1 class="logo">
<span class="text logo-title">SomeLogoText</span>
</h1>
less (css)
h1.logo {
font-family: "Roboto Slab", arial, sans-serif;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 15px;
float: left;
a {
color: #fff;
padding: 15px 30px;
display: inline-block;
text-align: center;
line-height: 1.4;
max-width: 155px;
background: #color;
.border-radiuses(0, 4px, 4px, 0);
.transition (color 0.4s ease-in-out);
position: relative;
font-size: 20px;
&:hover {
text-decoration: none;
}
}
.logo-title {
vertical-align: middle;
line-height: 1.6;
}
}
Inline elements ignore width, and also max-width.
Your text simply doesn't fit the max-width: 155px; that you specify in your LESS code.
As soon as you take display: inline-block; off the element, it becomes display: inline; per default and thus ignores your max-width: 155px; and so the element becomes wider to contain the text.
If you have to stick to those 155px all you can do is try to reduce the padding-left and padding-right, e.g. padding: 15px 10px; and see if your text fits then.
What you need is either:
Increase the max-with on .a (current value 155px)
Reduce the padding left/right on .a (current value 30px)
until the text fit the background
If a logo you could get away with giving the box a fixed width, as the text wont dynamically change, just match the box to logo width (or wider with centered text). If you need vertical spacing you could add an inline-block element inside the logo which contains the logo link itself
Why I cannot use margin for my a links in div with id="menu".
I can use margin-left right but I cannot use margin-top or bottom. I want to move the text a bit to the top, because I think it is crushed a little on the bottom border.
Why does margin top and bottom not work? Any ideas?
Live page is here: http://www.woojoin.com
Depending on your goal, to move the entire bar, you can add the attribute 'position:absolute' to #menu, or to just move the text you can apply that attribute to #menufix. This is just an introductory idea of course.
Did you try using this?
margin:0 auto;
Based on what I'm currently seeing on your site, adding display: inline-block should do the trick.
#menu a {
font-family: Calibri;
font-weight: bold;
margin-left: 50px;
margin-right: 50px;
text-decoration: none;
color: #000;
margin-top: 1px;
display: inline-block;
}
Because it has no layout. Set display:block, or display:inline-block.
Like the title, I want to vertical align center a <a> inside <ul><li>. Here the jsfiddle
Due to the fact you are specifying heights on both elements, this can easily be achieved by adding margin-top: 0.5em to a.
Like This
This is because the li has a height of 3em, the a has a height of 2em, so it needs half an em at the top to look vertically centered
Change the line-height of the a to match the line-height of the li.
a {
/*...preceding styles */
line-height: 3em; /* Elements line-height set to match parents */
height: 2em;
width: 5em;
text-align: center;
}
OR
Set the property vertical-align:middle on the a.
a{
/*...Other styles ommitted*/
vertical-align: middle;
}
Example http://jsfiddle.net/gvTLw/5/
You need to change the height and line-height of the a element to match the height of the li:
li {
height: 3em;
}
a {
line-height: 3em;
height: 3em;
}
Similar to Kevin's response, setting line-height on the anchor to inherit will do the same thing, without having to match the value manually
Fiddle
I'm getting some problems with vertical aligment.
I want to put my <span>›</span> element centralized in vertical.
http://jsfiddle.net/vpVEf/
Is there a way to centralize it automatically as the "li a" in this example? Note that the a element is centralized without using line-height.
http://jsfiddle.net/vpVEf/9/
The reason this is happening is because the a tag has a padding, pushing down everything in it by 12px.
Remove the top/bottom padding and use line-height to make it 68px tall.
padding: 0 12px;
line-height: 68px;
It might not look like it, but this does fix the problem. Remove all formatting from the span to see! But now the issue is that the text isn't aligned center within the span. You can use line-height on the span to adjust that as well.
line-height: 55px;
Seems to work well.
DEMO
Try using line-height to adjust the vertical alignment on your span:
#MenuEventos li span{
position: relative;
float: right;
font-size: 3.5em;
color: white;
font-family: serif;
font-weight: bold;
margin: auto 0px auto 0px;
line-height: 44px; /* Adjust this as needed */
}
Example: http://jsfiddle.net/vpVEf/1/
Take the line-height: 2.8em; that you have in #MenuEventos li a style and move it to the #MenuEventos li style.
See this jfiddle: http://jsfiddle.net/zFnJb/
You need to make <a> element floating left and <span> element floating right.
I need to make following code stretchable with predefined height
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
But since span is inline element, "height" property won't work.
I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.
What's a good solution for this?
Give it a display:inline-block in CSS - that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:
IE 6/7 accepts the value only on elements with a natural display: inline.
Use
.title{
display: inline-block;
height: 25px;
}
The only trick is browser support. Check if your list of supported browsers handles inline-block here.
this is to make display:inline-block work in all browsers:
Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Assuming you don't want to make it a block element, then you might try:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.
span { display: table-cell; height: (your-height + px); vertical-align: middle; }
For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.
Another option of course is to use Javascript (Jquery here):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
In some case you may want to adjust a SPAN height without changing display : inline.
To solve this, you can add a top and/or bottom border property, setting the required width parameter to your needs, and a transparent color to hide that border :
.myspan {
border-top : solid 3px transparent;
border-bottom : solid 3px transparent;
}
.my-span {
border: solid 1px;
border-color: gray;
border-radius: 6px;
padding-left: 5px;
padding-right: 5px;
height: 17px;
padding-top: 6px;
display: inline-block;
line-height: 0px;
}
Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.