I defined main stylesheet (default CSS of my project) like this:
body {
color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height: 1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing: 0.03em;
}
letter-spacing and line-height works perfectly.
but, I found that two of them affect ul-li elements too.
I want that they affect text only not ul-li or any other elements.
Is there any side-effect on letter-spacing and line-height which I don't know?
If so, how could I make line-height and letter-spacing affect text only?
With the body definition you apply your style to all elements in your page. Try to identify the desired text elements like div, a, span, etc. and make a new css entry like this:
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
}
div, a, span {
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
or apply a seperate style with specific key to your text elements.
You can define the CSS for the <p> tag only, and put all texts in a p element:
p {
line-height:1.5;
}
but, I found that two of them affect ul-li elements too.
So just make another selector for ul/li elements that sets it back to normal.
ul, li {
letter-spacing:0em;
line-height:1;
}
You can set the line-height and letter-spacing back to normal on li elements:
li {
letter-spacing: normal;
line-height: normal; /* this is actually 0em */
}
Why not just reset your ul li elements back to the default line-height after the body style?
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
ul, ul li {
line-height: 1;
letter-spacing: 0em;
}
Related
I created a basic page with Bootstrap and cannot make the font size of my blockquotes smaller. When I change the CSS font-size property, the margins change since they're based on it, but the size of the text itself doesn't.
CodePen
Here's the CSS applied for the blockquotes:
blockquote {
font-family: Georgia, serif;
font-size: 1em;
font-style: italic;
margin: 3em auto !important;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -20px; /* Negative moves it left */
top: -20px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
If you want to change the font size of the text inside blockquote, You have to define font size property of the <p> tag inside the blockquote like this
blockquote p {
font-size: 0.8em !important;
}
!important is must necessary here it will override the font-size defined in bootstrap.
you can not use CSS direct like this
blockquote {
font-size: 30px;
}
because this tag has it's own font-size property.
The relation between blockquote and p tag is CSS Combinators
The blockquote override your css, so you have to add !important to the difenittion.
For Example:
font-size: 1em!important;
but if you want to chang the p tag:
blockquote p{
font-size:1em;
}
This is just because <blockquote> is outer element..The inner element is <p> so you have to apply changes to <p> itself.
blockquote{
font-size:30px;
}
p{
font-size:25px;
}
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
</blockquote>
Or if you want to use font-size of blockquote, you have to use !important like this:
blockquote{
font-size:30px !important;
}
For some reason, I've got an annoying padding/margin below my "large" font:
http://jsfiddle.net/o9gvgz8c/1/
I've enlarged the font more than I need, just to exaggerate the problem . The CSS in question is:
p::first-letter {
font-size: 40px;font-family: 'Special Elite',cursive;padding-right: 2px
}
If I don't use a larger font as the start character, then its fine... but as soon as I make the first letter larger, it adds this margin in.
How can I get around this?
JS Fiddle
adding line-height will fix it
p::first-letter {
font-size: 50px;
font-family:'Special Elite', cursive;
padding-right: 2px;
line-height:10px;
}
Make sure to define your ::first-letter line-height property as either:
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 16px;
}
or
p::first-letter {
font-size: 50px;font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
http://jsfiddle.net/o9gvgz8c/3/
You can use relative sizing on the first letter and set the line-height property to the relative height 100%, like this:
p::first-letter {
font-size: 200%;
font-family: 'Special Elite',cursive;
padding-right: 2px;
line-height: 100%;
}
You can remove that gap by specifying a line-height on the p element :
p{line-height:18px;}
DEMO
Previously on “let’s not support display: run-in because it’s complicated and nobody actually uses or wants to use it,” StackOverflow edition…
display: run-in dropped in Chrome?
Style a definitition list as simple key value set
CSS method instead of display:run-in; to position a block inline?
I would like the following behavior for h5 elements in my document:
It acts like run-in when followed by a paragraph (p)
It acts like block when followed by a heading (h1, …, h6) or something else (ul, etc.)
This is essentially the same behavior as run-in if the contents of headings are wrapped in (or contain) a block; i.e., by changing <h6>…</h6> to <h6><div>…</div></h6> or <h6>…<div /></h6>.
(However, I would prefer not to modify the HTML if possible: it’s generated from markdown via pandoc.)
Here’s what I have so far, using floating inline-blocks. Notice how the margin between the h5 and h6 gets “collapsed.”
CSS
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
h4,h5,h6 {
clear: both;
}
h5 {
float: left;
display: inline-block;
margin: 0 1em 0 0;
}
HTML
<h4>Section</h4>
<h5>Heading</h5>
<p>Paragraph here. This is some text to fill out the line and make it wrap,
so you can get a feel for how a heading with <code>display: run-in;</code>
might look.</p>
<h5>Heading, but without immediately following text</h5>
<h6><div>Subheading</div></h6>
<p>There should be as much space between the <h5> and <h6> as there is
between the <h4> and <h5>, but it gets “collapsed” because the
<h5> floats.</p>
<h5>Heading followed by a list</h5>
<ul><li>A list item</li></ul>
Here is a jsfiddle containing the HTML and CSS.
Here is one using run-in for browsers that still support it, like Safari.
Here’s a demo page from 7 years ago I found that attempts (unsuccessfully) to fake the same behavior.
Screenshots of Safari
Faked:
Using run-in (expected behavior, with correct margins between the h5 and the h6 or ul):
Maybe i have a compromised you would like : DEMO
/* Just some basic styles to start off */
body { line-height: 1.5; }
h4,h5,h6 { font-size: 1em; margin: 1em 0; }
h4 { background: #fee; }
h5 { background: #eef; }
h6 { background: #dfd; font-style: italic; font-weight: normal; }
/* Now let’s try to emulate `display: run-in`... */
* {
clear:left;
}
h5 {
float:left;
display: run-in;
margin: 0 1em 0 0;
}
h5:after {
content:'.';
position:absolute;
background:inherit;
width:100%;
right:0;
z-index:-1;
}
body {
position:relative; /* to include defaut margin of body to draw h5:after element within body */
}
p /* + any other phrasing tag you wish */ {
clear:none;
background:white;
}
How can I push the bottom margin up with about 5 pixels using css?
Here is the example about what I want to achieve:
Although you can do using line-height, it might screw up the next lines. So I suggest this:
h1 {
font-size: 24px;
border-bottom: 2px solid #FF6A00;
/* proposing line height + padding */
line-height: 20px;
margin-bottom: 5px;
}
You can do it with line-height:css rule.
set line-height: 18px; and that will do this trick.
Try this fiddle which uses padding.
padding-bottom: 5px;
You could do it with underlining. Like this:
h1 {
font-size: 24px;
padding: 0;
color: #FF6A00;
text-decoration: underline;
}
h1 span {
color: #000;
}
And then just put the text in h1 inside a span:
<h1><span>Szavazás az új domain-ról</span></h1>
See this this fiddle.
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?