In my HTML code whenever I use sentence like below :
<p> This is a example sentence </p> or
<h3> This is header Sentence </h3>
It is displaying from extreme left side but I want some space before my sentence starts. For this I am using non breaking space. But it looks very ugly since I need to use 5 to 10 times of non breaking space like this :
I tried to use also but in this case also i need to use 5 times. So what other options i have to make my sentence to start with some spaces??
You can use text-indent property to indent your text inside a p or h3
Alternatively, if you are looking to pad up entire paragraph or header, you should have a wrapper div and use padding or margin for p as well as h3.
But as you said you are using am sure what you are looking for is text-indent.
p.class_name {
text-indent: 20px;
}
Demo
I've edited your question though, as you only used html tag, I have also added a CSS tag, but if you want a HTML solution than take a look at pre tag
Have you tried using margins?
To always indent, use code such as this:
HTML
<p> This is a example sentence </p>
CSS
p{
margin-left:10px;
}
You can use padding for tag by using css like
p{
padding-left:10px;
}
Related
I am using Jekyll to convert some blog posts from markdown format into HTML.
Some of the markdown content looks like this:
The previous paragraph.
Some text content to
flowed to the right of the image.
The next paragraph.
Jekyll translates this to (approximately):
<p>
The previous paragraph
</p>
<p>
<img src="xyz.jpg">Some text content to be flowed to the right of the
image.
</p>
Other markdown content looks like this:
The previous paragraph.
The next paragraph.
Jekyll translates this to (approximately):
<p>
The previous paragraph
</p>
<p>
<img src="abc.jpg">
</p>
<p>
The next paragraph
</p>
This is logical, but doesn't entirely work for my purposes, because I want to
apply some CSS styling to the first type of image so that it floats left of
the text, so the text wraps around (in fact, I think I want to apply
approximately float: left; margin-right: 1em;), but not the second type.
(Currently my CSS styling has float set to the default, which means the first
category of images do not float left of the paragraph, even though that's the
implication of the markdown).
Is there a way to apply some CSS styling to <img>s that only appear inside a
<p> with no other content next to them? I am using less, if that helps.
Alternatively, is there some other way to fix my problem?
I definitely need to consider the input markdown an invariant - it's being
generated by an automated process I cannot reasonably change. I would prefer
not to modify Jekyll also (although I am willing to entertain that possibility
as an answer).
Does the :only-child pseudo-class work?
p > img:only-child{
float: left;
margin-right: 1em;
}
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
What is a good way to put more than one space in HTML?
To show one space we write . For five spaces, we have to write five times, and so on.
Is there a better way? Is there a special tag to use?
You can use the
<pre>a text with multiple spaces</pre>
tag.
As far as I know, if you are not using CSS then is the only way. These days using CSS and adding a spacer <span> would be more advisable.
You could use something like <span style="margin-left: 20px;"></span> to create some sort of 20px space between two words. Other than that, no.
It is often best to handle this with CSS instead of HTML. CSS gives you more control over the whitespace than the <pre> tag does. Also, browsers apply default styles to <pre> that you might not want.
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
body {
max-width: 12em;
}
<div class="pre">Text that preserves whitespace and does not wrap</div>
<div class="pre-wrap">Text that preserves whitespace and wraps as needed</div>
<pre>Text inside a <pre> tag also preserves whitespace</pre>
To actually insert spaces you are stuck with , the other common thing for spacing things out is to use 1x1 pixel gif and set the images with in the IMG tag.
The simplest way I have used is to add <span style="color:white;">(anything here)</span>
The bit in the span can be as long or as short as you like- it's not seen. The color of course is the color of the page/section where you place it. I prefer XXXXXXX as X is standard width (unlike M and I) and it's easy to see how many Xs you will need for a given space.
I want to use <p> instead of <br><br> since it takes less space and I can change how big of a gap it will create (changing the top margin of p).
However when using a floating image using <p> will make the row appear below the image instead of beside it.
I was think about setting the display property to inline but that makes the <p> not changing row at all.
So, how can i make p behave like br?
You don't 'make <p> behave like <br>', you use the right element for the job. If you're wrapping paragraphs of text, you use a <p> tag.
Outside of HTML emails, I don't ever see a use for a <br><br>.
p { height:(designated height of space); }
note that this only works if the line is very short and not breaking; or you will end up with a mess.
Its not really good practice to change the br tag...I mean that's why standards exist. like #hunter said before.
For some reason my paragraphs are displaying line breaks when there is no <br/> tag being used! So if I type content into the HTML and hit return a few times it gets formatted that way.
How can I prevent that? Can I not just get it to flow?
Browsers will automatically render paragraph tags to have some padding unless you explicitly style it not to... is this the problem?
If so, p {padding: 0; margin:0;}
If not, try giving us some of your code and a better explanation of exactly what the problem is.
Put this into your stylesheet:
p {white-space:normal;}
The <pre> tag will cause white space to display. So will a CSS rule like this:
p {white-space: pre;}
Could either of those be the problem?
If the text is being broken to make it fit, you cannot / should not try to stop the text from breaking. However, if your problem is that the text is breaking at an undesirable point and you would rather have it break at a more appropriate point, use the following:
<nobr>... Unwanted break point here ...</nobr>
enclose the unwanted break point with nobr tags.
And, add the following at the appropriate break point:
... some text ... Text on next line