Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Is this valid HTML/CSS?
<div>
<div style="display:inline-block; border:1px solid red">
<div style="display:inline-block; padding:5px">Test</div><br />
<div style="display:inline-block; padding:5px">Test</div>
</div>
</div>
i.e. is it considered OK to nest one inline-block inside another? I'm guessing not!
Quote from html validator:
Cases where the default styles are likely to lead to confusion:
Certain elements have default styles or behaviors that make certain
combinations likely to lead to confusion. Where these have equivalent
alternatives without this problem, the confusing combinations are
disallowed.
Examples:
1- <div> inside <span> (block inside inline element)
2- <textarea> inside <button>
If you consider inline-blocks either block or inline element by default, there would be no confusing behavior if you nest inline inside inline or block inside block. The only confusing combination is a block inside the inline element.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Is it a good way to use anonymous block box instead block element? What are pros and cons?
<div>
Some text
<p>More text</p>
</div>
vs
<div>
<p>Some text</p>
<p>More text</p>
</div>
P.S. The question arose after reading this point http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level.
You should use semantic markup, meaning using HTML tags that describe your content properly. Look to the CSS specs themselves, which say:
CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.
I discuss this more on this article: http://phrogz.net/CSS/HowToDevelopWithCSS.html#semanticmarkup
In your specific case, if you use CSS to do something like p:first-line { text-indent:2em } it will not apply to your "some text" if you do not include the wrapper element. If you include the <p> then all styling that applies to paragraphs will properly appear.
(And you may wish to use a more appropriate element than <div>, such as <section> if applicable.)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is the safest/no height change cross-browser way to add a space between paragraphs when using css reset?
<div>
<p class="text">paragraph1</p>
<p> </p>
<p class="text">paragraph2</p>
</div>
<div>
<p class="text">paragraph1</p>
<br>
<br>
<p class="text">paragraph2</p>
</div>
http://jsfiddle.net/unknown601/0ewvk3c9/
I find it useful to include space between adjacent paragraphs.
Example: http://jsfiddle.net/kppb0nLx/3/
/* a paragraph proceeded by another paragraph will have a top margin */
p + p {
margin-top: 8px;
}
This allows you to keep paragraphs flush with the top/bottom of your container while still having space between them.
The options you listed (br and p purely for spacing) are not considered good practice. They don't represent the your content semantically and they create extra markup that can easily be replaced with CSS.
More Reading
The <br> tag should only be used to break line i.e <p>This is first line <br> This is second line.</p>
For spacing i would have to say on based on my personal experience & on observation of most of the frameworks margin is the best practice to create spacing between paragraph.
DEMO
CSS:
p{
margin: 0 0 10px;
}
Edit: I like #Tim Medora solution much better: p + p { margin-top: 8px; } by adding top margin to adjacent p tags we eliminate the first and last p tag margin issues commonly faced.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'd like to style a text box within a div that has a specified class:
<style>
.myStyle input[type="text"] {
width: 250px;
}
</style>
<div class="myStyle">
<input type="text">
</div>
This code doesn't work, is there a way to do this? (other than assigning a class to the text box itself).
There's nothing wrong with your CSS, just add </input> before the </div> and you'll be good to go.
Fiddle: http://jsfiddle.net/6zmNM/ (With JS to provide an alert for the width of the text box)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
How do i provide a non breaking white space between a text element and <a> tag all nested within a span
<span>
<label> this is xyz</label>
<a href ="">
</span>
I want to do this using CSS and not with
Also I have tried using all combinations of white-space, but it wasn't any good.
Please use follwing CSS and HTML:--
HTML:-
<span>xyzLINK</span>
CSS:-
a:before
{
content:" ";
}
a{text-decoration:none;}
See the fiddle:--
http://jsfiddle.net/npsingh/TJhh7/2/show
you can set a margin for the tag, and set white-space:nowrap to prevent breaking, if white-space property isnt working then there might be other styles that might be interfering with it, or even other html elements, as your current code in the question is not complete we cannot see what the full markup looks like and tell.
for instance if some style is setting your anchor tags to be block element (display:block;), this would cause it to break to new line even with white-space property. Try adding in display:inline to the style as well to see if it helps
html
<span>
<label> this is xyz</label>
some text
</span>
css
span {
white-space:nowrap;
}
span a {
margin-left:10px;
margin-right:10px;
display:inline;
}
JSFiddle Demo
If you want to use CSS, see the white-space property:
<span style="white-space:nowrap">
<label>this is xyz</label>
Stack Overflow
</span>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been trying to align the P tag text left and right next to each other but can't get it to do so. They are both within the same divs and I'm coding in ems and % could anyone help?
You should use span instead of p which has a default display of inline
<span>Your text here</span>
The p element is default display block. If you insist on using p, then you need to dive into some CSS. Set a class for the p element (or ID if it is unique) like so
<p class="inline-p">Your text here </p>
Then in a separate CSS file, use a selector to reference that class. Please try to avoid inline CSS in your HTML. It can become a nightmare to maintain later.
.inline-p {
// Modify display for this class
display: inline;
}
You should avoid modifying the properties of HTML tags when there is an existing HTML tag that can accomplish what you are looking to do. Nevertheless, both your options are presented here. Good luck with your website.
make display:inline; for p tag
You can't align text left and right in the same p tag unless you use span. But you could do it using the CSS float property
<p style="float: left">Some text on the left</p>
<p style="float: right">Some text on the right</p>
You haven't posted any code for us to analyze, so speaking generally... you can mess with the "display" CSS style and floats to get them lined up as you need, or you could use a more appropriate tag that is already inline, like a span.