Fght
Posts: 319
Joined: Thu Feb 05, 2015 10:26 pm

how can i make spacing between html visual elements?

Fri Jul 17, 2015 9:16 am

i don't want to use <p></p> or <br>

i've a reset.css file but i'm not sure if i should change the file or something else..

currently i deleted the <p>'s for paragraph spacing because it wasn't convenient to me...

i can sent you a link to the files to check this...

User avatar
RaTTuS
Posts: 10514
Joined: Tue Nov 29, 2011 11:12 am
Location: North West UK
Contact: Twitter YouTube

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 9:30 am

How To ask Questions :- http://www.catb.org/esr/faqs/smart-questions.html
WARNING - some parts of this post may be erroneous YMMV

1QC43qbL5FySu2Pi51vGqKqxy3UiJgukSX
Covfefe

x3go
Posts: 4
Joined: Sun Dec 21, 2014 11:35 am

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 10:48 am

It depends on what do you mean by spacing?
You can share a link to your code (HTML+CSS), (codepen or jsfiddle can help you with it)

Get familiar with the Box Model which applies margin and padding in CSS,
As well with line-height Property which RaTTuS mentioned.

Fght
Posts: 319
Joined: Thu Feb 05, 2015 10:26 pm

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 1:47 pm

thanks guys...
the line height is just ok

but the space between <h1> for example and <p> is very short.
i know i can use empty <p></p> tag but i don't find it a good solution..

the problem is especially true with my web font which is not being used on codepen...

http://codepen.io/anon/pen/xGJrbE

User avatar
JRV
Posts: 270
Joined: Mon Apr 02, 2012 1:39 pm
Location: Minneapolis, MN

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 3:01 pm

I like to use

Code: Select all

<PRE>

</PRE>

Fght
Posts: 319
Joined: Thu Feb 05, 2015 10:26 pm

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 4:41 pm

i'm not sure you get it..
i want more space like this:
http://postimg.org/image/4njggxmoj/

the different elements are just too close to one another.

perhaps i need to change something in the 'reset' section of the css?

is it related to the box model?

x3go
Posts: 4
Joined: Sun Dec 21, 2014 11:35 am

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 5:25 pm

I think that best approach is to leave the rest.css as is without any changes and add afterwards your styles.
The font you chose is terrible for reading.
if you want to use this web-font consider leave it just to the main titles.
sorry to tell you your code is very clumsy, try to spend some time learning and reading about css basics.

here is a very quick and very minor changes I've made to your code, just to understand if it's what you saw in mind when you asked for guidance about those spacings.

http://codepen.io/anon/pen/qdyXLw

Fght
Posts: 319
Joined: Thu Feb 05, 2015 10:26 pm

Re: how can i make spacing between html visual elements?

Fri Jul 17, 2015 6:24 pm

thanks!
i will examine what you added

you must understand something.
i don't have the tools to properly work with html in hebrew.
this is one of the reasons why it's clumsy..
because it's hard for the beginner to work with html and hebrew together

besides that i find it a bit hard to learn the rules of html and css programming.

i can give example of how the code is hard to read or manipulate when involved hebrew.

i will change the font for just the titles too. :)

let me know if you don't agree

edit:

how do i make these links to be each in a new line without empty "p" or "br"?
http://postimg.org/image/yzr67hww1/

currently they are in one line...

JimmyN
Posts: 1109
Joined: Wed Mar 18, 2015 7:05 pm
Location: Virginia, USA

Re: how can i make spacing between html visual elements?

Sun Jul 19, 2015 2:42 pm

Fght wrote: but the space between <h1> for example and <p> is very short.
i know i can use empty <p></p> tag but i don't find it a good solution..
If you only need extra spacing in one or two places, or if you want to be able to individually fine tune the spacing for different paragraphs, then add the styling right to the paragraph tag. This method is called inline styling.

Code: Select all

<h1>This is the heading line</h1>
<p style="padding-top: 10px">
This paragraph will have 10px of blank space added at the top.
The padding will provide the spacing you want between the heading and the paragraph text below it.  It only applies to this one paragraph.
</p>
If you want to use the spacing in many places, then add the style to your stylesheet by creating a new class. Add this to your stylesheet:

Code: Select all

p.toppad  {
padding-top: 10px;
}
When you want the regular spacing then use the normal paragraph tag, if you want a paragraph to have extra spacing then add the toppad class to the tag.

Code: Select all

<h1>This is the heading line</h1>
<p class="toppad">
This paragraph will have 10px of blank space added at the top.
The padding will provide the spacing you want between the heading and the paragraph text below it.  It only applies to this one paragraph.
</p>
<p>
This paragraph will have the default spacing at the top, since no extra styling was provided.
</p>
If you only need the spacing after a heading line then another option would be to automatically add padding to the bottom of the heading each time it's used, instead of applying it to the top of the following paragraph. You could add this to your stylesheet:

Code: Select all

h1 {
padding-bottom: 10px;
}
With that added to the style sheet you will always get the extra space below it when using a h1 line, without having to style the following paragraph, image, table, etc.

Fght
Posts: 319
Joined: Thu Feb 05, 2015 10:26 pm

Re: how can i make spacing between html visual elements?

Sun Jul 19, 2015 4:45 pm

it got solved already with the previous answer but thanks..

does the solution similar with my last question too? (the big links lying in the same line in which i want to be separated in lines.)

Return to “Off topic discussion”