I want space between my <p>content</p> tags. Not before and not after <p> tags. For example, my code is:
<div>
<h1>A headline</h1>
<p>Some text</p>
<p>Some text</p>
</div>
Something
I don't want space between h1 and p which is done with zero margin on h1. But I don't want space after the last <p> tag. Is this possible without :last-child or some JavaScript/jQuery?
I can't set class="last" on the last tag because it is a CMS system.
p + p {
margin-top: 1.5em;
}
(Although this requires a browser with better support for CSS than IE6.)
If you're not required to support Internet Explorer 6 (IE6) you can use:
div, h1, p { margin: 0; }
p + p { margin-top: 12px; }
If you need to support IE6, this is a dirty hack but it works without JavaScript:
div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }
The disadvantage of this method is that you can't simply use, say, 1em for the balancing margins as they have different font sizes. You can either manually adjust as required or use pixel widths.
Set a default bottom-margin to p, then give the last tag a class with no bottom-margin.
<div>
<h1>A headline</h1>
<p>Some text</p>
<div class="paragraph-space"></div>
<p>Some text</p>
</div>
?
<div>
<h1>A headline</h1>
<p>Some text</p>
<p style="margin-bottom: 0;">Some text</p>
</div>
If you want to make it more browser compatible, you could also use:
p { margin-top: 24px; }
h1 { margin-bottom: -24px; } /* Play with this value as necessary */
Negative margins will pull elements toward them. It's messier than I like, but when you are at the mercy of CMS generated code with no way to add classes, you have to be creative.
Related
For now I have used <h1></h1>
What to do if I want to center the text without using the header?
h1{
text-align: center;
}
p{
text-align: left;
}
<h1>My Text<h1/>
<p>some other text</p>
You should start using css to code everything about the html properties, not inside the html code
Text -- regular paragraphs of text -- should be wrapped in paragraph tags (<p></p>). You can then center all p tags (or just the one you're targetting).
p {
text-align: center;
}
<h1>I am a heading</h1>
<p>I am regular text</p>
Alternatively, if you want to center everything, you can style the <body> tag.
body {
text-align: center;
}
<h1>I am a header</h1>
<h2>I am a subheader</h2>
I am unwrapped text.
<p>I am text in a paragraph tag.</p>
Note that putting the style on the body will center everything.
(Some browsers will implicitly wrap your regular text in <p> tags if you don't, but it's much better practice for you to do it yourself.)
I am about to start a large, design oriented website that just has to be pixel perfect and as good as possible.
The problem is how to keep consistent spacing between elements in a container like this:
Currently I create all containers with
padding: 40px 40px 30px and every element with margin-bottom: 10px;
This solves the problem nicely, but every element, including headings, has to have exactly 10 pixels below itself and zero pixels above itself.
Currently I also use https://github.com/kiskadigitalmedia/kiskabricks_wedgecss (div with set height) to create additional vertical whitespace if the design calls for it. Like here:
This is the code for the above example:
<div class="card">
<h1>Heading 1</h1>
<p>Paragraph text</p>
<div class="wedge-2x">
<a class="btn">Button</a>
</div>
Does this approach make sense? Is there any better way to guarantee consistent spacing of elements inside a container? Any input appreciated.
I would do it like this:
<div class="card">
<h1>Heading 1</h1>
<p>Paragraph text</p>
<a class="btn">Button</a>
</div>
CSS:
.card {
padding: 40px;
box-sizing: border-box;
}
h1, p {
margin-bottom: 10px;
}
.btn {
margin-top: 20px;
display: inline-block;
}
If you want for example a 10 pixels margin above & below your elements, an option could be something like this. All the elements inside the class="card" will be affected by the same margins.
.card{
padding: 40px;
}
.card h1, .card p, .card .wedge-2x, .card a{
margin: 30px 0px;
}
It depends on how much flexibility you want to have.
your solution looks like a good start. maybe try and use siblings selectors too?
so in scss you'd have something like:
.card {
padding: 40px;
h1 ~ p,
h1 ~ a { margin-top: 10px; }
}
Or use + instead of ~ if you want a more specific HTML structure.
Or you could rewrite this using margin-top for all elements except for the first one, by using :first-child { ... }
I created an section with three articles, im wondering why there is an margin/padding betwenn the articles:
My html:
<section id="home">
<article>
<h1>Übersicht</h1>
</article>
<article>
<h1>Leute</h1>
</article>
<article>
<h1>Links</h1>
</article>
</section>
And my css:
section { width: 87%;
margin: 0px auto;
}
article {
width:33%;
font-family: 'Open Sans', sans-serif;
background-color:blue;
display: inline-block;
margin:0px;
padding: 0px;
}
Try to replace inline-block with block and use float:left Please see this fiddle
JSFIDDLE EXAMPLE
There is whitespace between the display:inlin-block elements. Just remove them, example:
<section id="home">
<article><h1>Übersicht</h1></article><!--
--><article><h1>Leute</h1></article><!--
--><article><h1>Links</h1></article>
</section>
Or:
<section id="home">
<article><h1>Übersicht</h1></article><article><h1>Leute</h1></article><article><h1>Links</h1></article>
</section>
JSFiddle
Or adding font-size:0; to the parent container, example.
The spaces is added by your browser automaticly.
A widly accepted fix for this is by adding font-size:0 to the parent container and then a reasonable font size to the child elements
In your case you would do this:
section {
font-size: 0; //Must be zero
}
article {
font-size: 10px; //can be anything you want
width:33%;
font-family: 'Open Sans', sans-serif;
background-color:blue;
display: inline-block;
margin:0px;
padding: 0px;
}
Any two inline or inline-block elements are rendered with a white space between them, even if you have several spaces/new lines separating them in the markup.
For example, these 3 divs, will all render hello world:
<div>hello world</div>
<div>hello
world</div>
<div>
hello
world
</div>
This happens because the text nodes are inline.
In your case, you need to make sure, the opening <article> is immediately after the previous closing </article>:
<section id="home">
<article>
<h1>Übersicht</h1>
</article><article>
<h1>Leute</h1>
</article><article>
<h1>Links</h1>
</article>
</section>
jsFiddle
Taking the above example, here you don't want hello world, you want helloworld, so just remove any spaces between these 2 words in the markup.
Display inline block is exactly what it is. An inline element with block properties. So that being said if you have a white space / line break between the elements it will add a gap.
I suggest using display: block and float: left in this case. This method also adds support for older browsers. If you prefer to use inline-block, remove the white space so that the end tag and beginning tag of the elements are directly next to each other.
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
This should be interesting. Here's what I'm trying to do with CSS:
The words "An Example Alignment" should be in a single <h1> element.
The word "Alignment" should be on the second line (easy with a <br /> tag).
The word "An" should be smaller than the other words (easy with a <span> tag).
So we have:
<h1><span>An</span> Example <br />Alignment</h1>
But here's the catch:
I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.
Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/
But that's an ugly solution as there are two <h1> elements.
Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.
P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)
I'd do the padding by using two display:inline-block spans, to make sure the right margin is always exactly the same (font width varies, depending on the in-use font face).
<h1>
<span class="padding">An</span> Example <br>
<span class="padding"></span> Alignment
</h1>
CSS:
h1 {
font-size: 30px;
}
.padding {
font-size: 20px;
width: 30px;
display:inline-block;
}
Just beware that IE doesn't always use inline-block the right way (although in this case it should).
Update
An even better solution: http://jsfiddle.net/H2Pzr/9/
Use the table-cell display of elements to automatically put them in two columns:
HTML:
<h1>
<span class="first">An</span>
<div class="second">
Example <br>
Alignment
</div>
</h1>
CSS:
h1 {
font-size: 30px;
}
.first {
display:table-cell;
font-size: 20px;
color: #444;
}
.second {
display:table-cell;
}
I would use two span classes in the same H1 tag:
<h1>
<span class="small-text">An</span> Example
<span class="line-two">Alignment</span>
</h1>
Then update your CSS accordingly:
h1 {
font-size: 30px;
}
span.small-text {
font-size: 20px;
}
.line-two{
display:block;
margin-left: 31px;
}
You don't even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/
use two span with different class see jsfiddle
<h1><span class="first">An</span> Example <br>
<span class="second">Alignment</span>
</h1>
Try this: (minimal elements!)
<h1>Example <br>Alignment</h1>
h1 {
font-size: 30px;
margin-left: 31px;
}
h1:before
{
content: 'An ';
font-size: 20px;
margin-left: -31px;
}
<font color="#FFFFFF">
<span style="float: left; position: relative; top: 25px; left:100px">
text here<br>and more text here....
</span>
</font>
Perhaps there's a more imperative style associated with that element somewhere else in the cascade? Load that sucker up in Chrome and inspect the element via Web Developer extension - it will show the computed style on that element, and any overridden styles.
EDIT:
In response to comments:
<p style="line-height:1.2em;">Your text here</p>
That should do it, or adjust the 1.2em upward by small amounts. Remember though, this will only apply the line height style to that specific <p> tag. If you can /need to / want to be consistent, apply that style="line-height:1.2em;" to the paragraph's containing element, like:
<div style="line-height:1.2em;">
<p>Paragraph 1 will have the same line-height as</p>
<p>Paragraph 2.</p>
</div>
This is not true usage. I think the true usage is;
<span><font></font></span>
But you should try this;
<style>
.class1{
height: 100px;
width: 250px;
background-color: #000;
color: #fff;
font: normal 12px Verdana;
line-height: 100px;
}
</style>
<div class="class1">your text message is here...</div>
you can use another way for line-height in font property;
font: normal 12px/100px Verdana;