How can I remove the line-breaks before and after the <p> element? I tried to use span instead of <p>. But what I wanted was a box with a height larger than the text I supply inside it with a particular background color. With span, I think this is not possible. If it is possible, or if there are any other suggestions, please help me.
p {
display: inline-block;
}
this should help
This works for me:
p {
margin: 0;
}
It removes both space above and under element.
Related
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 a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
Hi,
I have the following HTML :
<div class="controlTitleContainer ">
<label for="test">Titel</label>
<div class="q"> </div>
</div>
The CSS looks like this
.controlTitleContainer .label
{
font-size: 0.94em;
color: #778899;
display:inline;
}
.controlTitleContainer .q
{
background-image: url("Images/Common/Icons/questionMark_15x14.png");
height: 14px;
width: 15px;
float:left;
}
The problem is that the div will be placed to the left of the label instead of to the right? Why?
I have tried to switch the div to a span with no success. Also If I change the div to a img intead then it will work but there is some unvanted margins that I can´t remove with the div element.
Pleas advice
Edit1: The confusions in the question should now be fixed, sorry for that.
MySolution : I created two div elements (one for text and one for icon) and then set float to left on both.
You're quite confused. You talk about IMG in question title, then you present SPAN in your code and afterwards talk about DIV in your text.
But I guess all three refer to SPAN in your code since you do set a background image to your SPAN element.
Solution
Anyway. Your span is floated left according to your CSS. If you remove the following line in your style sheet, your span will appear to the right of your label:
float: left; /* <- remove this */
Edit: I suppose your question got downvoted due to this confusion. If you want the community to help with detailed answers the least you could do is to take the time to formulate your question with the same amount of care as you expect back.
Do you not want the image to the right of the label? You have specified float: left;. You may also want to change .label to label in line one of the css code.
You could use the "CSS :after Selector"
Link : http://www.w3schools.com/cssref/sel_after.asp
Floats can be tricky... I would just make sure that the label is inline or inline-block, and that your image or image container also is inline or inline-block. They would then be aligned as text on a row. Yeay!
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.
I have html and css as below -
.title {
display: block; background-color: red;
}
<a href="#">
<span class="title">Text</span>
</a>
I could see that the SPAN spans to the 100% of the available width (because of display: block). Like below
|----------------------------------------------------|
| Text |
|----------------------------------------------------|
In Firefox, I can click anywhere in the above box, and it takes me to the linked page. However, In IE (IE 7) I get the cursor as hand only when I hover over "Text" text only.
What hack I'll have to do to make it work (same as it does in FF) in IE as well?
I tried placing the anchor tag itself (not just the text) in span but it won't work.
Thanks.
Style the anchor and remove the span.
(The problem is due to how some browsers handle elements that are display: block inside elements that are display: inline. You can work around it by styling both the anchor and the span, but the span appears redundant in this example)
for your <a> tag, make the style "display: block; width:100%;"
Definitely, you need to remove the span and apply that class to the anchor tag. I don't think you need to set the width to 100% explicitly, but I could be wrong.
Remove the extra span and place that title class on the link itself. Then add width:100%; to the css.
Less markup is most often better, thats why you should remove the extra span.
you can also using margin or padding
Give a style to anchor of display:block and max-width:30px !important; max-width size can be any
li a {
display: block;
height: 30px;
max-width: 30px !important;
}