Hello, So i was wondering if there is a way to change the how a button displays? When i add a roll button it seem to coming with padding on the side of the button, even when i have the margin and padding set to 0. this would not bother me if the space was even on both side but it is not. i have been looking through the wiki for about 3 hours and have not found a solution. is there a way to fix this i will add a pic and my html and css. CSS .ui-dialog .charsheet button[type=roll]:before { content: ""; } button[type=roll], button[type=action], button[type=compendium], button[type=cancel], button[type=submit], button[type=finish], button[type=back], label{ background-color: light Gray; border: none; line-height: 12px; background-image: none; box-shadow: none; padding: 0px; margin: 0px; font-weight: bold; text-align:center; position:center; justify-items: center; } button[type=roll]::before{ content: "" !important; } .sheet input[class="checkbox1"] { height: 28px; width: 28px; } .sheet input[class="checkbox2"] { height: 22px; width: 22px; } .text1{ height: 22px; width: 200px; text-align: center; } .text2{ height: 22px; width: 100px; text-align: center; } .text3{ height: 22px; width: 75px; text-align: center; } .text4{ height: 22px; width: 90px; text-align: center; } .text5{ height: 22px; width: 50px; text-align: center; } .text6{ height: 22px; width: 160px; text-align: center; } .text7{ height: 22px; width: 110px; text-align: center; } .button1{ width:100px; text-align: center; padding: 0px; margin: 0px; } div.sheet{ display: grid; width:830px; justify-items: center; text-align:center; margin: 0 auto; } /* Section 1 */ div.section1{ border: 3px solid purple; display: grid; width:830px; justify-items: center; } div.header1{ display: grid; grid-template-columns: 200px 100px 75px 75px 75px 90px 90px 90px; grid-auto-rows: 20px; } div.bio1{ display: grid; grid-template-columns: 200px 100px 75px 75px 75px 90px 90px 90px; grid-auto-rows: 22px; } div.header2{ display: grid; grid-template-columns: 220px 20px 220px 5px 50px 10px 220px 5px 50px; grid-auto-rows: 20px; } div.bio2{ display: grid; grid-template-columns: repeat(10,22px) 20px repeat(10,22px) 5px 50px 5px repeat(10,22px) 5px 50px; grid-auto-rows: 22px; } div.header3{ display: grid; grid-template-columns: 160px 110px 50px 50px 5px 50px 50px 5px 100px 15px 22px 50px; text-align:center; } div.bio3{ display: grid; grid-template-columns: 160px 110px 50px 50px 5px 50px 50px 110px 22px 50px; text-align:center; grid-auto-rows: 22px; } HTML <div class="sheet"> <div class="section1"> <div class="header1"> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>Passive</h4> <h4>Passive</h4> <h4>Passive</h4> <h4>Name</h4> <h4>Background</h4> <h4>Class</h4> <h4>Level</h4> <h4>Proficiency</h4> <h4>Perception</h4> <h4>Insight</h4> <h4>Investigation</h4> </div> <div class="bio1"> <input class="text1" name="attr_CharacterName" type="text" value="Character Name"> <select class="text2" name="attr_Background"> <option value="1000">---</option> <option value="1001">Acolyte</option> <option value="1002">Aristocrat</option> <option value="1003">Athlete</option> <option value="1004">Charlatan</option> <option value="1005">Criminal</option> <option value="1006">Entertainer</option> <option value="1007">Laborer</option> <option value="1008">Medic</option> <option value="1009">Scholar</option> <option value="1010">Soldier</option> <option value="1011">Survivalist</option> <option value="1012">Traveler</option> <option value="1013">Urchin</option> </select> <select class="text3" name="attr_Class"> <option>None</option> <option>Expert</option> <option>Fighter</option> <option>Leader</option> </select> <input class="text3" name="attr_Level" type="text" value="0" max="10"> <input class="text3" name="attr_Proficiency" type="text" readonly /> <input class="text4" name="attr_Passive_Perception" type="text" value="10+@{Perception_Total}+@{Observant_Checkbox}" disabled="true" /> <input class="text4" name="attr_Passive_Insight" type="text" value="10+@{Insight_Total}" disabled="true" /> <input class="text4" name="attr_Passive_Investigation" type="text" value="10+@{Investigation_Total}" disabled="true" /> </div> <div class="header2"> <h4>Exhaustion</h4> <h4>&nbsp </h4> <h4>Minor Wounds</h4> <h4>&nbsp </h4> <h4>Fitness</h4> <h4>&nbsp </h4> <h4>Sanity</h4> <h4>&nbsp </h4> <h4>Total</h4> </div> <div class="bio2"> <input class="checkbox2" type="checkbox" name="attr_ex1" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex2" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex3" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex4" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex5" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex6" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex7" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex8" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex9" value="1"> <input class="checkbox2" type="checkbox" name="attr_ex10" value="1"> <h4>&nbsp </h4> <input class="checkbox2" type="checkbox" name="attr_mw1" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw2" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw3" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw4" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw5" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw6" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw7" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw8" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw9" value="1"> <input class="checkbox2" type="checkbox" name="attr_mw10" value="1"> <h4>&nbsp </h4> <input class="text5" type="text" name="attr_totlevel" value="0-(@{MW_Level}+@{EX_Level})" disabled="ture"/> <h4>&nbsp </h4> <input class="checkbox2" type="checkbox" name="attr_sn1" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn2" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn3" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn4" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn5" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn6" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn7" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn8" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn9" value="1"> <input class="checkbox2" type="checkbox" name="attr_sn10" value="1"> <h4>&nbsp </h4> <input class="text5" type="text" name="attr_sanlevel" value="[[0-(@{sn1}+@{sn2}+@{sn3}+@{sn4}+@{sn5}+@{sn6}+@{sn7}+@{sn8}+@{sn9}+@{sn10})]]" disabled="true" /> </div> <div class="header3"> <h4>Armor</h4> <h4>Shield</h4> <h6>Bonus</h6> <h4>AC</h4> <h4>&nbsp </h4> <h4>HP</h4> <h4>Max</h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>&nbsp </h4> <h4>Initiative</h4> </div> <div class="bio3"> <input class="text6" name="attr_Equiped_Armor" type="text" readonly /> <input class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input class="text5" name="attr_ac3" type="text" value="0" > <input class="text5" name="attr_AC_Total" type="text" readonly /> <h4>&nbsp </h4> <input class="text5" name="attr_Curren_hp" type="text" value="0"> <input class="text5" name="attr_Max_hp" type="text" readonly /> <input class="text7" name="attr_Max_hp" type="text" readonly /> <input class="checkbox2" name="attr_Level_Up" type="checkbox" value="1"> <input class="text5" type="text" name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> <div class="bio3"> <input class="text6" name="attr_Equiped_Armor" type="text" readonly /> <input class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input class="text5" name="attr_ac3" type="text" value="0" > <input class="text5" name="attr_AC_Total" type="text" readonly /> <h4>&nbsp </h4> <input class="text5" name="attr_Curren_hp" type="text" value="0"> <input class="text5" name="attr_Max_hp" type="text" readonly /> <button class="button1" type="roll" value="&{template:default} {{name=@{CharacterName} Level Up}} {{HP=[[1d@{lv0roll}r1]]}}">Level Up</button> <input class="checkbox2" name="attr_Level_Up" type="checkbox" value="1"> <input class="text5" type="text" name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> <div class="bio3"> <input class="text6" name="attr_Equiped_Armor" type="text" readonly /> <input class="text7" name="attr_Equiped_Shield" type="text" readonly /> <input class="text5" name="attr_ac3" type="text" value="0" > <input class="text5" name="attr_AC_Total" type="text" readonly /> <h4>&nbsp </h4> <input class="text5" name="attr_Curren_hp" type="text" value="0"> <input class="text5" name="attr_Max_hp" type="text" readonly /> <input class="text7" name="attr_Max_hp" type="text" readonly /> <input class="checkbox2" name="attr_Level_Up" type="checkbox" value="1"> <input class="text5" type="text" name="attr_Initiative" value="(@{Dex_Mod})+.@{Dex}" disabled="true" /> </div> </div> </div>