Table des matières
Cet onglet vous permet de gérer un des paramètres les plus important, à savoir la taille des éléments qui apparaîtront à l'écran. Nous sommes ici sur des options intermédiaires, donc assurez-vous d'avoir lu au préalable l'article concernant la prise en main d'Oxygen. Si vous êtes arrivés ici depuis ce guide, vous êtes au bon endroit.
Ces deux sections vont vous permettre de gérer l'espace avec les autres éléments. Ils sont cependant sensiblement différents :
Imaginons une boîte. Le padding serait l'espace entre le contenu de cette boîte et ses parois, tandis que la margin serait l'espace autour de la boîte elle-même.
On peut aussi imaginer une page web comme un camion contenant plusieurs cartons qui contiennent chacun un objet. La margin serait dans ce cas l'espace entre chaque carton, et le padding l'espace entre le carton et le contenu.
SI vous n'êtes pas encore à l'aise avec ces deux concepts, sachez que la margin est utilisée dans plus de 90% des cas, notamment lorsqu'on veut mettre un peu d'espace avec d'autres éléments. Le padding est surtout utilisé l'on a besoin d'avoir d'avoir de l'espace entre le conteneur et les éléments intérieurs, par exemple si l'on met une couleur de fond.
Ouvrons une page sur Oxygen builder. Pour commencer, nous insérons une div directement à l'intérieur du Inner content, et nous la renommons contact
A présent, en laissant le conteneur sélectionné, sur cliquons sur l'onglet Background, situé tout en haut de la barre d'édition. Nous lui ajoutons ensuite une couleur d'arrière-plan. La couleur n'a pas d'importance, veillez simplement à ce qu'elle soit différente de la couleur de vos textes.
A présent, nous allons ajouter un peu de Margin pour éviter que le conteneur soit collé au reste. Nous ouvrons donc l'onglet Size & Spacing, puis nous entrons une margin de 200px en haut (ou plus si vous estimez que c'est nécessaires).
Nous ne voulons pas que notre conteneur fasse la totalité de l'écran. Nous allons donc ajouter des margin de 8% à droite et à gauche.
Sur notre exemple, le pied de page est trop collé à l'élément. Nous ajoutons donc une margin en bas pour aérer la page.
Nous ajoutons maintenant un titre et des textes au conteneur. Vous pouvez en modifier le contenu directement dans la barre d'édition lorsque vous cliquez dessus. Pour pour d'informations, consultez le guide dédié à la typographie
L'état actuel de votre page devrait ressembler à quelque chose comme ça. Si vous n'avez pas les mêmes couleurs ou textes, ce n'est pas grave.
Nous allons maintenant augmenter l'espace entre l'élément de titre et les texte, en rajoutant 30px de margin vers le bas (margin-bottom)
Enfin, nous avons besoin de mettre un peu d'espace entre les textes et le bord du conteneur. Nous allons donc sélectionner le conteneur parent(dans notre exemple, la div contact) et mettre 4% de padding de chaque côté.
Vous savez maintenant comment fonctionnent les concepts de Margin et de Padding. N'hésitez pas à vous entraîner de votre côté !
Ce sont les onglets qui vous permettent de gérer la taille de votre conteneur ou de l'élément. Si vous ne précisez rien, la taille du conteneur ou de l'élément s'adaptera automatiquement à son contenu.
Il n'est pas toujours nécessaire d'utiliser ces options. de manière générale, voici les situations qui pourraient vous amener à les utiliser
Lorsque vous éditez une page, il est préférable d'éviter que vos éléments restent collés aux bord de la page : ce n'est déjà pas très esthétique (sauf si c'est voulu dans un cas précis) et peut amener quelques problèmes. Il est en effet bon de prévoir de l'espace entre les bord de la page et les éléments (un peu comme les marge d'impression).
Mais mettre une marge au niveau de la page n'est pas toujours facile, surtout quand elle doit fonctionner sur tablette et mobile. Voici une technique très simple et efficace :
Spécifier une margin auto va aligner votre conteneur au milieu de la page, ce qui laissera une marge égale à droite et à gauche. Dans notre exemple, 15/2 = 7,5% de marge de chaque côté. Bien sûr, vous pouvez spécifier une width différente si vous souhaitez avoir des marges plus grandes ou petites.
Vous pouvez également mettre une width plus grande en fonction du format pour diminuer la marge à mesure que la fenêtre se rétrécit : 90% en format tablette, 95% en format mobile par exemple. Attention, lorsque vous changez un champ en % sur un autre format, l'unité a tendance à se remettre en px, prenez alors soin de spécifiez à nouveau une taille en %. Si votre page casse subitement quand vous changez la marge sur d'autres formats, c'est sûrement la cause du souci.
pour en savoir plus sur les unités de mesure, consultez le guide dédié.
Vous pouvez également en profiter pour spécifier une classe qui vous permettra de réutiliser vos réglages rapidement si vous avez besoin de créer plusieurs pages ou d'alterner plusieurs types de marge dans la même page. Lorsque nous réalisons un site, nous créons généralement une classe normal que nous assignons à toutes les div qui gèrent les marges principales.
Ces champs sont utiles uniquement dans le cas où vous spécifiez des unités en %, vw ou vh (voir le guide dédié aux unités de mesure pour plus d'infos), et servent à interdire à l'élément de dépasser ou d'être plus petit qu'une certaine taille.
