I don´t understand why <p> tag in HTML has two line breaks instead one, can someone tell me why its like that and if its possible to fix it to one with CSS.
Two line breaks:
<p>Hello World</p>my name is Yoel.
Compares with <br> one line break:
Hello World
<br>my name is Yoel.
What you're seeing isn't actually an extra line-break, but a margin. By default p tags come with a small margin to help visually define them.
If you want to get rid of that you can add the following to your CSS:
p {
margin: 0;
}
ON Chrome you get default styles:
p{
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
If you set them to 0 you will get the same result as br tag
<p> is meant to be a new paragraph, while <br> is the one to use for just a line break.
A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose (source)
Different browsers have different render engines and apply different user agent stylesheets.
By default, browsers apply a margin to <p> elements.
You can remove the margin-bottom with
p { margin-bottom: 0;}
Or even better, do this:
<p>Hello World
<br>my name is Yoel.</p>
The <br> tag is correctly used if it is inside a <p> tag, it indicates a line-break in a paragraph.
Related
TL;DR: Wondering if there's a CSS property that can break content where HTML doesn't naturally:
Baby
Buggy Bumpers
instead of
Baby Buggy
Bumpers
The only way I can think of to do it is to add where you don't want the line to break, but I'm working in WordPress, which strips those.
This is to graphically style a site's name on the home page. The site name is part of the nav, so it's inside an <li>, using grid layout.
Luckily in my case, setting the width with a dimension that is relative to the font size seems to break the way I want at all viewport widths:
.my-brand a {
width: 16ch;
text-align: end;
}
white-space: nowrap and such elements won't work with the "baby buggy bumpers" example because the need is to break after one specific word. Just wondering if there's some way to specify in a way similar to nth-child(2).
Made a Codepen to play with.
If you can't use Javascript and can't add tags in the string like :
<div class='string'>
Baby<span>Buggy Bumpers</span>
</div>
It only remain "hacky" CSS solution. There is one using pseudo-elements :
HTML :
<div class='string'>
Baby
</div>
CSS :
.string{
width: 11ch;
text-align: end;
font-size: 2em;
}
.string::after {
content: "Buggy Bumpers";
color: red;
display:block ;
white-space:nowrap;
}
Live exemple : https://codepen.io/camillewemajin/pen/JjWzWzN
But that's not really clean for many reasons, like SEO...
I'm trying to override the impact Superscript characters (registered trademark character ®) are causing to my email paragraph line height in Salesforce Marketing Cloud (using the HTML editor).
Here is an example of the paragraph I am attempting to apply the in-line CSS on:
<span style="color:#569bbe;">•</span> lorem palceholder text <sup>®</sup> lorem lorem placeholder.<br>
I used the <sup></sup> tags, but that has caused line-height inconsistencies.
I found this example on a support forum:
sup { line-height: 0; font-size: 75%; }
But I'm clueless about where this code actually goes and what the proper syntax would be to implement it. I've tried a bunch of different areas, but most examples I'm finding are on webpage-oriented CSS structure and I'm attempting to do it in-line.
Any advice?
I ended up figuring it out... Here is the solutuon:
<sup style="font-size: 10px; line-height: 0; vertical-align: 5px;">®</sup>
I'm learning CSS3 and while going through a layout, I noticed that when I try to add design to multiple sections and also classes/IDs, sometimes I have to have space between the section name and class/ID and sometimes I don't. Please see below, specially the ones in bold.
When I eliminate space and give space in the wrong place, the code doesn't work.
I want to know why this happens, how do I know when to give space or put them together?
Thanks!
#media(max-width:768px){
**header #branding,**
header nav,
header nav li,
**#newsletter h1**,
#newsletter form,
#boxes .box,
**article#main-col**,
**aside#sidebar**{
float: none;
text-align: center;
width: 100%;
}
Spaces are allowed anywhere. Multiple spaces are also allowed.
Combining things on one line is also no problem. But a word (selector, property or value) may not be broken. text- align (broken with space) is NOT allowed.
article#main-col (without space) selects the <article id="main-col">
article #main-col (with space) selects an <... id="main-col"> inside the <article>
This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
I'm hoping this is simple. I'm not a CSS guy.
I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.
code {
display: block;
white-space:normal;
background-color: #eeeeee;
font: 1em, 'Courier New', Courier, Fixed;
padding: 7px;
margin: 7px 7px 7px 7px;
}
This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.
Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?
Thanks.
Comment: If I put a space on the empty line, I get what I want - a gray background on that line.
Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.
Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.
pre.code {
color: black;
border: solid 1px #eeeeee;
font-size: 1.1 em;
margin: 7px;
padding: 7px;
background: #eeeeee
}
It appears to work fine for me, but then I don't know what the contents of your <code> tags are.
There's a few oddities in your CSS in any case:
I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.
I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.
Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.
I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.
Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.
For WordPress, have a look at their article "Writing Code in Your Posts."
Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.
add:
width: 100%;
border: 1px solid #eee;
See if that helps, maybe change the border color to #000 to see where the boundaries are.
Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.