Hello and thanks for the help in advance. Newbie to responsive design and CSS. My test page is located at: http://www.marthawashingtonsalon.com/home/hero. I’m struggling with two issues. First, when I try to vertically space paragraphs by using padding or margin, it does not seem to add spacing and changes the width of the first paragraph. I’m not sure why. Second, I’m trying to center the contact for on the page using margin: auto for the parent element, but that doesn’t see to work either. Any help would be appreciated.
For the easy one - on the contact form, you need to set a width on the form (I used 20em on my quick test), then the margin: auto will center it.
For the padding/margin question, I’m not sure what look you’re trying to achieve. Could you possibly use a screen shot and show us what you’re trying to fix?
If you’re expecting the margin: auto I see defined on a couple elements to center it vertically and horizontally, that won’t work. But we’d need to see an example of what you’re trying to do before we can determine how to fix it…
Thanks for the response. For the contact form I have an div divcontact with margin set to auto and width set to 100% so I’m thinking this should center this element, but it doesn’t. On the paragraphs, I’m just trying to get more than a single line break.
If your width is set to 100%, then the entire viewport width is being used, so there’s nothing to center. That’s why I used a width of 20em (when I put a border around your form, it covered the width OK). You could play with a width less than 100% to see what width you want to use.
On the paragraphs, margin: auto essentially sets the top and bottom margins to 0. If you set the margin to something like margin: 2em auto; you should get a look you more satisfactory. The 2em sets the top and bottom margins to two times the generated height of an m in the generated font-base and text size.
Thanks for the help. So what you are saying is that by using margin: auto to horizontally center the elements, I am also setting the vertical margins to 0?
Essentially, but not really.
margin:auto really only works if dimensions are fixed. Paragraphs are not fixed dimensioned items. They have variable heights and widths, and while you CAN set both height and width, semantically, it only really makes sense to set one, and the least troublesome of the two is width. This is why you see a lot of margins set like margin:1em auto; or some variation where the top and bottom margins are defined, but the left and right are calculated automagically.
You CAN set fixed heights on the paragraph, but the margin calculation also references the parent, and changes in one or the other triggers the other to recalculate, which is why basically the top and bottom margins will zero out. You can force it with some absolute/relative trickery, but it’s overkill for a limited use case.
So what would best practices be to handle paragraphs?
Depends on the page design and/or the requirements. I will say that using auto for top/bottom is rare.
IF the paragraphs have a defined size. you’ll be more likely to see the margin: 1em auto; format which assigns a 1em margin to the top/bottom and uses auto margins for the size. If the paragraph width isn’t set, then one of these three will be used: the same margin will be used on each side (margin: 1em;), one that sets a value for top/bottom and left/right (margin: 1em 1.5em) or all four sides top/right/bottom/left (margin: 1em 2em 3em 4em;)
Personally, I fix the size width (using % or em) in the controlling container, then set appropriate margins for the paragraphs. Very similar to how a word processing document is set up.
If you want single space between the paragraphs, use 1em for the top and bottom margins. If you want double spaced, use 2em. If you want something in between, use 1.5em.
The nice thing with the em relational measurement is it will resize based on the base font size. If the user uses a larger font size, the em will adjust the sizing appropriately.
Not an answer to your specific questions, but a handy reference:
(and it was updated 29th May, 2019, so don’t be put off by the date on the link).
1 Like
Thanks to everyone for the help.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.