CODEWITHSUNDEEP
codenameone
user1246562
user1246562

Reputation: 825

Where exactly is the border of an element drawn wrt to the margin and padding?

In my css definition file, I've added css borders to many of the elements like containers in a list to separate them visually. However, the lines of the borders are sometimes not visible, or only partly visible.

I'm guessing it may be because the border's line is overwritten by the element next to it, so I'd like to understand exactly where CN1 draws the border. E.g. it is within the padding, just outside the padding, inside the margin or just outside the margin? Also, is the border added to the size of the padding or margin or is it drawn on top of either?

It seems like a pretty basic question, but I haven't been able to find the answer so far (e.g. borders are not shown in the diagram in section "Padding and Margin" here: https://www.codenameone.com/manual/theme-basics.html), so any help or pointer to the documentation would be greatly appreciated.

Upvotes: 2

Views: 47

Answers (1)

Shai Almog
Shai Almog

Reputation: 52770

The border is a part of the component so it falls within the padding. Notice this paragraph from the theme basics section:

Padding and margin are concepts derived from the CSS box model. They are slightly different in Codename One, where the border spacing is part of the padding, but other than that they are pretty similar: ...

So effectively you need to make sure that there's enough padding to contain the border of the component. Margin resides outside of the component and the component is "unaware" of the margin.

If you think this isn't sufficiently clear or properly explained you can edit this to clarify it through the wiki page here: https://github.com/codenameone/CodenameOne/wiki/Theme-Basics

The docs are generated from that page, see https://www.codenameone.com/blog/tip-edit-docs-fun-profit.html

Upvotes: 1

Related Questions