I don't get it. Why is there so much space between "title" and "text"? Please take a look at this code:
<h3 style="background:#000">Title</h3>
<p class="d" style="background:#000">
Text Text Text Text Text Text Text Text Text Text Text
</p>
There are absolutely no other styles applied to those two elements, but still, there are so much unused space. Anyone have an idea here?
The caption tags (<h1>, <h2>, ...) have a default padding and margin applied to them.
The same is for the paragraph <p>
If you want to remove those default spacing add the following style to the captions and paragraphs inside your css or element:
padding: 0; margin: 0;
try to give margin:0 for h3 and p
Css Resets should usually be applied to CSS code so that your styling is only affected by what you put in, not default styling. http://www.cssreset.com/ contains some nice resets you may choose to use. This occurs as default margins set on headings are showed, a simple style of:
h3 {
padding:0;
margin:0;
}
Would resolve for this specific element only, thus the css resets come in handy for resetting all HTML elements to be without style.
You have to use reset.css to eliminate the default margin and padding.
meyerweb's reset css can be a good start.
It's because <p> is a paragraph. And by default paragraph has margin-top: 1em; and margin-bottom: 1em;. <h1> - <h6> is a heading tags, and by default it has margin-top and margin-bottom from 2.33em to 0.67em
Related
I have this code:
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>
I think HTML would automatically add 1 line spacing in between them.
I would like them to just go without 1 line of spacing, line by line I mean, not line space line space.
How could I do this without using a <br> element which is definitely unworkable in between the <h1> and <h3>, and probably not a structurally good HTML practice maybe too right?
Is using a CSS bottom margin fix this?
I am sorry to ask such an easy question maybe, I am a still bit new to HTML & CSS, but I am still learning. Thx in advance for all the answers
Default styling, the enemy of consistency
Many elements have default margins applied to them by browsers. The problem is that each browser (Chrome, IE etc) applies different amounts of margin.
This makes it hard to achieve consistency between browsers, and consistency is what we need for effective web-design.
CSS Resets to the rescue
Look into the concept of "CSS Resets". Using this approach, and advisably some prebuilt code like this: https://github.com/murtaugh/HTML5-Reset will RESET these values to zero to give you a level playing field.
Then YOU can decide how much margin your headings will have.
The reset you are looking for here - just for this problem - is:
h1, h2, h3 {
margin: 0px;
}
Then applying your own styles
Then you would build it back up again, like this for example:
h1, h2, h3 {
margin: 0px;
}
h1 {
margin-bottom: 20px;
}
h2, h3 {
margin-bottom: 10px;
}
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>
The universal reset
A very simple "total" CSS reset would be:
* {
margin:0;
padding:0;
}
But that's not advisable for a number of reasons especially performance: (why) is the CSS star selector considered harmful?
The vertical spacing you see is caused by default top and bottom margins of heading elements. It has nothing to do with line spacing (in the CSS sense). To remove the spacing, set the relevant margins to zero. The details depend on the context and desired effects on margins before and after the sequence of headings (which is questionable structurally here – a 1st level heading immediately followed by two 3rd level headings; maybe you meant the second one to be h2?).
For the given markup, assuming that no other effects are desired, and assuming for simplicity that these are the only h1 and h3 elements, you would set
h1 { margin-bottom: 0; }
h3 { margin-top: 0; }
h1 + h3 { margin-bottom: 0; }
h1, h3 {
margin:0;
}
This will help
Headings have a margin by default, so yes, you should use CSS to remove the margins.
First of all I want to achieve a black background:
Instead of a black background I get bold letters.
HTML CODE
<span id="border"><h3>Title</h3>
<p>Lorem Ipsum</p>
</span>
CSS CODE
#border {
background-color: #000000;
}
Jsfiddle
http://jsfiddle.net/tYaCK/
This bold is actually coming from your h3 tag as a default style rather than your border css.
As for why your border isn't appearing... well that is because the span is an inline element and will not expand to contain the block level h3 tag.
You can see this working by adding display: inline-block; as a style to the h3 tag.
FYI You should not have a h3 within a span as that is not valid html. I would recommend a div tag as an alternative to the span.
Two issues:
The bold is the default styling of the <h3> tag.
Your black background isn't showing up because it's on a <span> element.
The span defaults to display:inline, which means it us not valid for it to contain block elements. The h3 is a block element.
To fix this, either use a div instead of a span, or set the span to display:block.
You could have seen the background color if the situation had been slightly different.
Consider the following HTML:
<span id="border">
Some opening text...
<h3>Title</h3>
<p>Lorem Ipsum</p>
and some closing text.
</span>
I just added some text to the span element.
And for the CSS, just add a color so you can see the text:
#border {
color: green;
background-color: #000000;
}
Demo at: http://jsfiddle.net/audetwebdesign/M8Exf/
What is happening here is that the CSS engine opens an inline block (span) and applies the format from #border.
However, upon finding the block level h3, the CSS engine closes off the span element (internally) and begins a new block level box, and similarly for the p element.
Upon finding the remaining text from the span, the CSS engine starts a new anonymous inline box and applies the same styling from #border.
This procedure is part of the CSS box and visual formatting model.
I have a few classes that adjust font sizing:
.text-tall {
font-size: 1.5em;
}
.text-small {
font-size: .8em;
}
When I apply the class to a paragraph element
<p class="text-tall">Some text goes here.</p>
the styling work as expected. When I apply it to a span element
<p><span class="text-tall">Some text goes here.</span></p>
the adjusted font-size is applied to all text below the element on the page, sometimes resulting in progressively larger and larger text.
The obvious solution would be to simply always apply the class to the paragraph element, but my paragraph bottom margin is relatively sized (margin-bottom: 1.5em), so doing that increases the margin, too, which is something I don't want to do.
This only seems to be a problem in IE8 and lower. Any suggestions would be appreciated!
Thanks for the tips, everyone. Turns out a function in my functions.php file (in WordPress) was removing the ending </span> tags.
Try specifying the text-tall div with the span in the CSS. For example, you could do this:
.text-tall span {
font-size: 1.5em;
}
You may also be able to do the same thing with the text-small.
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
I want to style my <BR> elements to have margins more like <P> elements. How can I do that?
Like this:
br {
margin-bottom: 1em;
}
You can use line-height. You have to have two <br />, first to break line and second to add range between lines.
You can specify any style to almost any element using CSS.
Default margin for P element is 1em 0; So, your CSS code should look like this:
br {
margin: 1em 0;
}
If you need to see default or current style properties for any element, you can use Firefox with Firebug or Chome/Safari/Opera Developer Tools.
Not sure why boogyman's answer has -2, but that's correct. To do what you're asking, try
<p> </p>
That will break the line and still give you the margin.