导航栏和“巨型”之间的空白

时间：2019-05-06 15:49:12

标签： html css web

我没有使用引导程序，但是我想在Nav的正下方添加一个像div这样的“超大号”。

但是，我的导航栏和div之间有一个小的空白，而且我不知道它在哪里获得利润。

我使用了chrome元素检查器，它们之间没有确定的边距。

我已将body标签设置为0边距和0填充，并且我尝试将各种元素和标签调整为0，唯一可行的是*，但我想尽可能避免使用star。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp">

<RelativeLayout
    android:id="@+id/RLatas"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/layout_rounded"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/HeaderWaktuMati"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#008577"
        android:gravity="center"
        android:text="DATA MENINGGAL"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/JudulHari"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editTextNama"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:text="Hari (Jawa)"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/judulTglMasehi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/JudulHari"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="5dp"
        android:text="Tanggal (Masehi)"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/judulTglJawa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/judulTglMasehi"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginTop="3dp"
        android:layout_marginBottom="5dp"
        android:text="Tanggal (Jawa)"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/TitikDua1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="118dp"
        android:layout_marginLeft="118dp"
        android:text=":"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/titikDua2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="118dp"
        android:layout_marginLeft="118dp"
        android:layout_marginTop="24dp"
        android:text=":"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/titikDua"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="118dp"
        android:layout_marginLeft="118dp"
        android:layout_marginTop="46dp"
        android:text=":"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/TextHariJawa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editTextNama"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_marginLeft="5dp"
        android:layout_toEndOf="@+id/titikDua"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textTglMasehi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="24dp"
        android:layout_toEndOf="@+id/titikDua"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textTglJawa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/JudulHari"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="46dp"
        android:layout_toEndOf="@+id/titikDua"
        android:textColor="#ffffff"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/editTextNama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgProfil"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/layout_rounded_biru"
        android:ems="10"
        android:hint="Nama orang yang meninggal"
        android:inputType="textPersonName"
        android:padding="5dp"
        android:textColor="#ffffff"
        android:textColorHint="#B3B2B2"
        android:textSize="14sp"
        android:textStyle="bold" />

    <RadioGroup
        android:id="@+id/RGroupWaktu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/HeaderWaktuMati"
        android:layout_marginTop="5dp"
        android:layout_marginRight="10dp"
        android:gravity="right"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/CheckSblm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="#ffffff"
            android:text="Sebelum Magrib"
            android:textColor="#ffffff"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/CheckSsdh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:buttonTint="#ffffff"
            android:text="Sesudah Magrib"
            android:textColor="#ffffff"
            android:textSize="10sp"
            android:textStyle="bold" />

    </RadioGroup>

    <Button
        android:id="@+id/GantiTanggal"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/RGroupWaktu"
        android:layout_alignParentTop="false"
        android:layout_marginLeft="120dp"
        android:background="@drawable/tanggalan"
        android:textSize="10sp" />

    <Button
        android:id="@+id/buttonOK"
        android:layout_width="149dp"
        android:layout_height="44dp"
        android:layout_alignBottom="@+id/GantiTanggal"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="19dp"
        android:layout_marginLeft="19dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="0dp"
        android:layout_toEndOf="@+id/GantiTanggal"
        android:layout_toRightOf="@+id/GantiTanggal"
        android:background="@drawable/layout_rounded_biru"
        android:src="@drawable/layout_rounded_biru"
        android:text="HITUNG"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:textStyle="bold" />

    <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imgProfil"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:layout_below="@id/RGroupWaktu"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="-25dp"
        android:layout_marginEnd="-103dp"
        android:layout_marginRight="-103dp"
        android:layout_marginBottom="5dp"
        android:layout_toStartOf="@+id/RGroupWaktu"
        android:layout_toLeftOf="@+id/RGroupWaktu"
        android:onClick="onUploadImageClick"
        android:src="@drawable/iconrounded"
        app:civ_border_color="#ffffff"
        app:civ_border_width="2dp" />

</RelativeLayout>

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="Display01.css">
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
            <title>Display 01</title>
        </head>
        <body>
        <!-- Ignore the nav - It is used to modeling purposes-->
        <!-- Jump to line 27 -->
        <nav>
            <div class="toggle">
                <h3>Logo</h3>
                <i id="menu" class="fas fa-bars"></i>
            </div>
            <ul>
                <li><a href="#"></a>Home</li>
                <li><a href="#"></a>About</li>
                <li><a href="#"></a>Services</li>
                <li><a href="#"></a>Portfolio</li>
                <li><a href="#"></a>Contact</li>
            </ul>
        </nav>
<!-- Begin Main Content -->
        <div class="display"><p>Test</p></div>
        <script type="text/javascript" src="Display01.js"></script>
        </body>
    </html>

我希望Display Div位于Nav栏下方，且没有空白。

一段时间以来，我一直在努力解决这个问题，对此我深表感谢。

2 个答案:

答案 0 :(得分：0)

页边距来自显示div中的段落元素。您可以删除该边距。

您还可以为显示div设置负的空白。

使用开发人员工具最左上角的按钮，然后将鼠标悬停在不同的元素上，您可以看到页边空白。

答案 1 :(得分：0)

在顶部的css文件中使用此

 *,
 *:before,
 *:after { 
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
相关问题
最新问题