How would you suggest to try to reset CSS shorthand-properties of a trivial tag like <p>?

In my content management system Drupal 10, the default theme Olivero is filled with CSS shorthand-properties like the following, and more.

margin-block
margin-block-start
margin-block-end
padding-block
padding-block-start
padding-block-end

My problem is that I find the margin-block-start and margin-block-end values, especially for the very trivial p tags in this theme, a bit exaggerated, but not sure to what it would be best to change them.

I don’t want to study the complex CSS source code of this theme from zero because I don’t like this theme a lot anyway and I can always swtich that theme to another one, but before I get into the adventure of a new theme, I’d like to try to fix the margin of the p tags myself.

For example, in Olivero, p tags are styled this way for desktop view:

@media (min-width: 43.75rem) {
    .text-content p, .cke_editable p {
        margin-block-start: var(--sp2);
        margin-block-end: var(--sp2);
        /* 
        sp2: calc(2 * var(--sp)); 
        --sp: 1.125rem;
        */
    }
}

How would you suggest to try to reset these CSS shorthand-properties of a trivial tag like <p>?
What px or em or rem value will you give?

	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

(Hint: Create a non-CSS’d file containing the element. Inspect it. You will see the default styles listed as “user agent stylesheet”.)

2 Likes

Do you mean reset or just change?

You can set the element to revert back to the initial browser defaults but then you won’t know what that is and it will be different across browsers.

If you want to set your own then just change it,

e.g.

@media (min-width: 43.75rem) {
    .text-content p, .cke_editable p {
        margin:0;
       padding:0;
    }
}

That will over-ride all previous padding and margins (including the logical properties of margin-block and padding-block etc) for elements that have the same weight (.text-content p etc…)

Bear in mind that those themes may have complicated relationships between padding and margins (hence the variables) and it may be (like bootstrap) that if you change the padding you break the theme so you have to use with care.

1 Like

I meant reset in the sense of a “standard” or “very common” reset for a p tag. I don’t know what are the current conventions, if any exist.

Usually the p element has a top margin and a bottom margin of 1 em and no padding defined by the user agent stylesheet (although older browsers will differ and there is no set standard anyway for defaults).

These days now that logical properties are being used the UA defaults will likely be using them rather than padding or margin.

e.g. A typical UA rule for the p element.

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

(Note that the display property of all elements are inline by default until styled by the UA; hence the UA display:block rule).

Logical properties differ in that they are not left or right as such or top or bottom but depend on the writing mode of the document. If you wanted your page to display with a left margin only then that would look wrong if the text direction was right to left. Logical properties avoid this issue by using start and end instead which refer to the direction used.

Margin or padding will over-ride the logical properties or vice versa.

If you are not interested in logical properties then I already gave the example in my previous post.

1 Like