Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ruchir Mishra
Courses Plus Student 785 PointsHow do we create some space between text elements on the same webpage? (e.g. if I want to create a list of testimonials)
I want to create a list of testimonials with photographs (received from my previous patients). How do I create some space after the end of the first one and before beginning the next one and so on?
6 Answers
Chris James
19,102 PointsEnclose each testimonial in a div, clear the floats and add any padding/margin you need to the div.
Agapito Cruz
21,486 PointsImages are rendered in boxes, so I think if you added margins and/or padding around them, they would end up with space separating them from the text.
Ruchir Mishra
Courses Plus Student 785 PointsThanks..but what I am stuck with is creating adequate space between the written feedback from 1 patient before the feedback of the next patient appears. Since, I have floated their images to the right and left alternately, I am unable to use the margin and padding feature of the image to achieve the desired spacing between the text elements.
Bill Hinostroza
19,273 PointsI'm not sure if this is the code you want but you can maybe use this. Either padding or margin or both.
.extra_space{
padding: top, right, bottom, left; or margin: top, right, bottom, left;
}
Ruchir Mishra
Courses Plus Student 785 PointsThanks but basically, what I want to know is how to create space between successive para elements on the same page.
Agapito Cruz
21,486 PointsRuchir,
If you used float on the images, then they are out of the 'flow' of the rest of the rendered elements. Have you tried using a clear:both on whatever element is holding your text? This should ensure that the cleared element is out of the way of the floated elements.
Hope this helps.
-Agapito
Ruchir Mishra
Courses Plus Student 785 PointsThanks but basically, what I want to know is how to create space between successive para elements on the same page so that there can be space after the written testimonial of 1 patient and before the start of another.
Agapito Cruz
21,486 PointsRuchir,
You could and add margin and/or padding to the p element in CSS. That should create some space between them.
p {
margin-bottom:10px;
}
Ruchir Mishra
Courses Plus Student 785 PointsThanks..can I identify specific paras beneath which I want to add these margins. Probably that would be possible if I could add a class identifier or something to those specific paras. But, can't figure out how to do that.
Agapito Cruz
21,486 PointsYou could do it with classes or just using the correct descendant selector something like section p { margin-bottom:10px; } to affect the p element inside a section element.
Ruchir Mishra
Courses Plus Student 785 PointsThanks a ton Agapito!