Margin settings vs margin-left/right/top/bottom

This forum is for all Flare issues not related to any of the other categories.
Post Reply
FeeMaher
Propeller Head
Posts: 20
Joined: Thu Sep 12, 2019 9:35 pm
Location: Melbourne, Australia

Margin settings vs margin-left/right/top/bottom

Post by FeeMaher »

I am having trouble with ul bullet lists within a table cell. I am playing around with the ul margins but there appears to be two sets of margin settings in the style sheet.
Flare's display of stylesheet settings (I don't work directly in the style sheet - I'm not techy enough yet ;-), the ul style list has 'margin' which can be expanded to set a margin for All, Top, Right, Left, Bottom, and under that each margin type is listed separately - 'margin-bottom', 'margin-left', 'margin-(location) etc. It appears I can have different settings on the 'margin' setting compared to the corresponding 'margin-location)' components.

Does anyone know what the 'margin' settings refer to compared to the individual 'margin-(location)' setting? And which setting takes precedence?

The trouble I am having is the bullets are displaying right up against the left table cell border - not indented slightly (as per the ul margin settings).

I have checked the li - and there are no settings on that. I also have padding on the table cell which is also being ignored by the ul list (although not ignored by table text.

Thanks in advance!
Jeong
Propeller Head
Posts: 25
Joined: Wed Jan 01, 2020 12:05 am

Re: Margin settings vs margin-left/right/top/bottom

Post by Jeong »

In CSS, the "margin" property is shorthand to allow all four margins to be defined in one declaration. One starts at the top, then goes clockwise. So...

Code: Select all

margin: 1em 2em 3em 4em;

...defines a 1em margin at top, 2em for right, 3em for bottom, and 4em for left. There's also shorthands for the shorthand. If you give only 1 number, then that's applied to all four margins. If 2, it'll take the first as top and bottom and the second as left and right. Full reference at: https://www.w3schools.com/css/css_margin.asp

Regarding precedence... in CSS, this is called specificity (more at https://www.w3schools.com/css/css_specificity.asp). There are actually a lot of rules about this, and to be honest, I used to always struggle with this myself and my CSS would look like graffiti in a bathroom 'cause I'd keep experimenting with things till I got the output I wanted, but not being quite sure why things didn't work before.

My strong advice is to bite the bullet one weekend and read a couple of introductory chapters about CSS. The topics you want to know well are specificity and selectors. You don't need to know much about various properties - you can learn those as you go - but understanding specificity and how selectors work, including more complex selectors that define parent/child relationships (e.g. applying a style to lists that are inside table cells only) will be an investment of your time that will continue to pay dividends later on. Also, there are just some things you cannot do in the Flare GUI that I find indispensable (e.g. Assigning multiple classes to an element).

To get you started, if you want the margins for a list style to be different inside a table cell without changing how that style looks elsewhere, you can use the following selector:

Code: Select all

td > ul {
margin-left: 1em;
}
The angled bracket says "for all unordered lists that are an immediate child of table data cells", apply a left margin of 1em.
Another thing to look out for is whether your text in the <li> item is wrapped in a <p> tag. You'll likely get different formatting with and without the <p> if you've done what I've done with line spacing.

Curious about the padding being ignored... I'm wondering if there's a negative margin somewhere? Or check the code.. I know when I enter text and delete it inside a table cell, have to reapply the cell style to get it back to what I initially had (in the XML editor, select table cells, right-click, select Cell Content Style, then reapply the cell content style you defined).

Good luck!
FeeMaher
Propeller Head
Posts: 20
Joined: Thu Sep 12, 2019 9:35 pm
Location: Melbourne, Australia

Re: Margin settings vs margin-left/right/top/bottom

Post by FeeMaher »

@Jeong, thank-you so much! I somehow missed the notification of your reply. Excellent info - thanks!
Post Reply